HTML Canvas - Basic Draw Circle

by black strings

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>
<p>
How html context 2d works is you start a path with beginPath().
Then draw a line by addressing the starting point the line should draw at using ctx.moveTo().
then when you tell from there, where to draw to using ctx.lineTo().
You make as many lineTo calls as needed.
Then to draw the line use ctx.stroke();

To connect the line back to where its starting point, use ctx.closePath() followed by stroke();
then you can fill the shape using ctx.fill();
</p>
<div id="img-container" style="border: thin solid red">

</div>

CSS

#img-container {
  max-height: 80px;
  display: inline-block;
}
#img-container img {
  max-height: 100px;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
/* 
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'white';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = '#ff0000';
ctx.stroke();

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.lineTo(100,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = 'green';
ctx.fill(); */

ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'red';


ctx.font = '20pt Verdana';
ctx.fillText('Some text', 50, 50);

ctx.strokeStyle = 'black';
ctx.strokeText('Some text', 50, 50);

ctx.fill();
ctx.stroke();

var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();

const con = document.getElementById('img-container');
con.appendChild(image);