Canvas & JS drawing recap

Your browser does not support the canvas element.



HTML Canvas Reference

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c0c0c0;">Your browser does not support the canvas element.</canvas><br><br>
<img id="scream" src="https://informalgripe.files.wordpress.com/2011/02/apscream1.jpg" width="50" height="50" style="opacity:0.5;"/><br><br>
<a href="https://www.w3schools.com/graphics/canvas_reference.asp">HTML Canvas Reference</a>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");

ctx.fillStyle = "#000000";
ctx.fillRect(0,200,50,50);

ctx.fillStyle = "#0FF000";
ctx.fillRect(200,0,50,50);

ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.lineTo(200,400);
ctx.stroke();

ctx.beginPath();
ctx.arc(300,200,50,0,2*Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "#FF0000";
ctx.lineWidth=5;
ctx.arc(100,300,50,0,1*Math.PI);
ctx.stroke();

ctx.font = "30px Impact";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/4);

ctx.drawImage(img, 260, 260);

ctx.beginPath();
ctx.lineCap="round";
ctx.strokeStyle = "#FF00FF";
ctx.moveTo(50,150);
ctx.lineWidth=20;
ctx.lineTo(100,150);
ctx.stroke();

ctx.translate(200,200);
ctx.rotate(45*Math.PI/180);
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 100, 100);


</script>