Getting Started with a Canvas

canvasDrawing.js

// jsfiddle.net
// html: <canvas id="myCanvas" width="500" height="500"></canvas>

// getting the canvas and canvas context
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// drawing a point point
ctx.moveTo(5, 5);
ctx.lineTo(5, 6);
ctx.stroke();

// to scale:
ctx.scale(5, 5);

// lines
ctx.moveTo(0, 0); // beginning point
ctx.lineTo(100, 0); // ending point
ctx.stroke(); // draw a line

// triangle
ctx.moveTo(0, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100 / 2, 0);
ctx.lineTo(0, 100);
ctx.stroke();


// rectangle
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 200, 200);
ctx.stroke();

ctx.strokeRect(100, 100, 200, 200);
ctx.stroke();

// circle
ctx.strokeStyle= "blue";
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI);
ctx.stroke();


// Text
ctx.fillStyle = "red";
ctx.font = "30px Arial;"
ctx.fillText("Hi World!", canvas.width / 4, canvas.height / 4);
ctx.stroke();


// problems:
// draw parallel lines:


// draw perpendicular lines:

// draw a right angle triangle:

// fit an isosolese trangle into a rectangle

// fit a cross in a cricle:

// make something up
// homework: make something up at home and show me the code on thursday
// (optional) if you want to look into more functions look at: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
// or: https://www.w3schools.com/html/html5_canvas.asp

https://jsfiddle.net/domenicrosati/pgczL87y/