Slide 39
Slide 39 text
const {createCanvas, loadImage} = require("canvas");
// 1. Draw the background image (syringe):
const img = await loadImage(path.resolve(__dirname, "icon.png"));
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 400, 400);
// 2. Calculate the math for the ring:
const radius = 200 - (28 / 2);
const angle = Math.PI * 1.5;
const offset = ((28 / 2) / (Math.PI * 400) * 360) * (Math.PI / 180);
ctx.lineWidth = 28;
ctx.lineCap = "round";
// 3. Outer Ring:
ctx.beginPath();
ctx.arc(200, 200, radius, angle, (Math.PI * 2) + angle, false);
ctx.strokeStyle = "#2c41a4";
ctx.stroke();
// 4. First Dose Ring:
ctx.beginPath(); โ 1st dose %
ctx.arc(200, 200, radius, angle + offset, (21.372 / 100 * Math.PI * 2) + angle - offset, false);
ctx.strokeStyle = "#c0f4b8";
ctx.stroke();
// 5. Second Dose Ring:
ctx.beginPath(); โ 2nd dose %
ctx.arc(200, 200, radius, angle + offset, (9.273 / 100 * Math.PI * 2) + angle - offset, false);
ctx.strokeStyle = "#34cf1c";
ctx.stroke();
// 6. Convert to base64 and POST account/update_profile_image:
await this.twitterClient.post("account/update_profile_image", {image: canvas.toDataURL().split(",")[1]});