-function writeBottomCircle(text, canvaId, diameter) {
+function writeBottomCircle(text, canvaId, diameter, color) {
var canvas = document.getElementById(canvaId);
writeCircularText(
text.toUpperCase(),
'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(),
'40',
'Roboto',
1,
- 0
+ 0,
+ color
);
}
fontSize,
fontFamily,
inwardFacing,
- kerning
+ kerning,
+ color
) {
// declare and intialize canvas, reference, and useful variables
align = align.toLowerCase();
// 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.
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>
#logo {
display: flex;
justify-items: center;
- background-image: url('img/antifascist-action.svg');
- background-repeat: no-repeat;
}
.logo-text {