Gamedev Canvas Workshop - lesson 1

Create the Canvas and draw on it.

by Zecheng Hu

HTML

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

CSS

canvas { background: #16DDED; }

JavaScript

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

ctx.beginPath();
ctx.rect(10, 40, 100, 25);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(125, 40, 100, 25);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(240, 40, 100, 25);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(355, 40, 100, 25);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.arc(240, 240, 15, 0, Math.PI*2, false);
ctx.fillStyle = "#38C028";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(10,75, 100, 25);
ctx.fillStyle = "#180EF1 ";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(125,75, 100, 25);
ctx.fillStyle = "#180EF1  ";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(240,75, 100, 25);
ctx.fillStyle = "#180EF1  ";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(355,75, 100, 25);
ctx.fillStyle = "#180EF1  ";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(10 ,110, 100, 25);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(125 ,110, 100, 25);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(240 ,110, 100, 25);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.rect(355 ,110, 100, 25);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.closePath();