HTML Canvas question.
Hello,
I need to draw 5 circles within this photoshop canvas. For some reason, the first circle is only showing half of it. Please advise how to fix it. Thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="draw()">
<canvas id="sketch" width="300" height="300">
</canvas>
<script>
function draw() {
var sketch = document.getElementById('sketch');
var context = sketch.getContext("2d");
context.fillStyle = "#FF0000 ";
for (i=0; i<=4; i++){
context.beginPath();
context.arc((i*70),20, 10, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
}
}
</script>
</body>
</html>
I need to draw 5 circles within this photoshop canvas. For some reason, the first circle is only showing half of it. Please advise how to fix it. Thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="draw()">
<canvas id="sketch" width="300" height="300">
</canvas>
<script>
function draw() {
var sketch = document.getElementById('sketch');
var context = sketch.getContext("2d");
context.fillStyle = "#FF0000 ";
for (i=0; i<=4; i++){
context.beginPath();
context.arc((i*70),20, 10, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
}
}
</script>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.