Altera inserçao de imagem de fundo para o canvas

diff --git a/dist/circletext.js b/dist/circletext.js
index b3b66756b9d71d4f7069d8191056eac7234631c8..f5d21c55b2312bcc43d8eb3b5a4209c7bb1ec90b 100644 (file)
--- a/dist/circletext.js
+++ b/dist/circletext.js
@@ -1,4 +1,4 @@
-function writeBottomCircle(text, canvaId, diameter) {
+function writeBottomCircle(text, canvaId, diameter, color) {
   var canvas = document.getElementById(canvaId);
   writeCircularText(
     text.toUpperCase(),
@@ -9,11 +9,12 @@ function writeBottomCircle(text, canvaId, diameter) {
     '40',
     'Roboto',
     0,
-    0
+    0,
+    color
   );
 }
 
-function writeTopCircle(text, canvaId, diameter) {
+function writeTopCircle(text, canvaId, diameter, color) {
   var canvas = document.getElementById(canvaId);
   writeCircularText(
     text.toUpperCase(),
@@ -24,7 +25,8 @@ function writeTopCircle(text, canvaId, diameter) {
     '40',
     'Roboto',
     1,
-    0
+    0,
+    color
   );
 }
 
@@ -37,7 +39,8 @@ function writeCircularText(
   fontSize,
   fontFamily,
   inwardFacing,
-  kerning
+  kerning,
+  color
 ) {
   // declare and intialize canvas, reference, and useful variables
   align = align.toLowerCase();
@@ -52,7 +55,7 @@ function writeCircularText(
 
   // set text attributes
   ctxRef.font = `${fontSize}px ${fontFamily}`;
-  ctxRef.fillStyle = 'white';
+  ctxRef.fillStyle = color;
 
   // Reverse letters for align Left inward, align right outward
   // and align center inward.

diff --git a/index.html b/index.html
index 83834df81bb2d0b7c19ae265ccca595f618f6c8a..a864fae3a1cbe2a97b495f012b9f86281057d63e 100644 (file)
--- a/index.html
+++ b/index.html
@@ -15,8 +15,16 @@
         Your browser does not support the canvas element.
     </canvas>
     <script>
-        writeBottomCircle("Antifacistas", "logo", 510)
-        writeTopCircle("Desenvolvedores", "logo", 510)
+
+        const canvas = document.getElementById("logo");
+        ctx = canvas.getContext("2d");
+        const background = new Image();
+        background.src = 'https://raw.githubusercontent.com/BambataTech/antifa-generator/master/img/antifascist-action.png';
+        background.onload = function () {
+            ctx.drawImage(background, 0, 0, 500, 500);
+            writeTopCircle("Programadores", "logo", 510, "white")
+            writeBottomCircle("Antifacistas", "logo", 510, "white")
+        }
     </script>
 </body>
 

diff --git a/styles.css b/styles.css
index 56122f513c517d6373af056ec130f92602b1c83a..cffec46208931ebefcfa9e2f976010752ede0f23 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -1,8 +1,6 @@
 #logo {
   display: flex;
   justify-items: center;
-  background-image: url('img/antifascist-action.svg');
-  background-repeat: no-repeat;
 }
 
 .logo-text {