I've been working on learning how to draw and fill different shapes using canvas and JavaScript. However, I've been having trouble getting my shapes to fill correctly. In my HTML document, all I have is a simple line:
<canvas id="canvas1" width="500" height="500"></canvas>
My JavaScript file consists of the following code:
function draw() {
var canvas1 = document.getElementById('canvas1');
if(canvas1.getContext) {
var ctx = canvas1.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 50, 0);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "white");
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(100, 25);
ctx.stroke();
ctx.moveTo(25, 50);
ctx.bezierCurveTo(25, 50, 50, 80, 75, 60)
ctx.fillStyle = "black";
ctx.fill();
ctx.beginPath();
ctx.moveTo(75, 100);
ctx.arc(50, 100, 25, 0, Math.PI*2, true);
ctx.fillStyle = "black";
ctx.fill();
ctx.beginPath();
ctx.fillStyle = gradient;
ctx.arc(75, 150, 25, 0, Math.PI*2, true);
ctx.fill();
}
}
However, despite following guides and trying various solutions, the result I'm seeing is not what I expected:
https://i.sstatic.net/cPMii.png
It's frustrating because when I change the color of my second circle, it fills perfectly fine. Furthermore, removing the last "ctx.beginPath();" results in my first circle being painted with a gradient. Yet, no matter what I try, I can't seem to replicate this bug for my second circle by rearranging the code or anything else.