Gamedev Canvas Workshop - lesson 1

Create the Canvas and draw on it.

HTML

<canvas id="myCanvas" width="700" height="500"></canvas>

CSS

canvas { background: #eee; }

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var a = Math.round((Math.random() * 100) + 1);
var b = Math.round((Math.random() * 100) + 1);
var c = Math.round((Math.random() * 100) + 1);

var d = a + b + c;



ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(50, 450);
ctx.lineTo(650, 400);
ctx.closePath();
ctx.lineWidth = 10;
ctx.strokeStyle = '#666666';
ctx.stroke();
ctx.fillStyle = "#FFCC00";
ctx.fill();

ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "black";
ctx.fillText(a + "°",52,60);


//width distance, and then altitude
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "black";
ctx.fillText(b+ "°",60,420);



//width distance, and then altitude
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "black";
ctx.fillText(c + "°",570,400);