window.onload = function() {
var canvas = document.getElementById("batman");
var context = canvas.getContext("2d");
var blackX = [76, 76, 65, 43, 54, 65, 76];
var blackY = [43, 54, 65, 76, 76, 76, 76];
var tanX = [10, 21, 32, 43, 10, 21, 32, 43, 10, 21, 32, 54, 65, 87, 98, 54, 65, 87, 98, 109, 131, 32, 43, 54, 76, 87, 98, 131, 87, 98, 109, 120, 54, 65, 76, 87, 98, 109, 120, 175, 186, 153, 164, 175, 186, 164, 175];
var tanY = [10, 10, 10, 10, 21, 21, 21, 21, 32, 32, 32, 43, 43, 43, 43, 54, 54, 54, 54, 54, 54, 65, 65, 65, 65, 65, 65, 65, 76, 76, 76, 76, 87, 87, 87, 87, 87, 87, 87, 120, 120, 131, 131, 131, 131, 142, 142];
var redX = [65, 76, 87, 98, 109, 120, 43, 54, 65, 76, 87, 98, 109, 120, 131, 10, 21, 32, 43, 10, 21, 32, 43, 10, 21, 21, 32, 32, 43, 43, 54, 76, 87, 98, 120, 131, 142, 153, 164, 65, 76, 87, 109, 120, 131, 142, 153, 164, 175, 109, 120, 131, 142, 153, 164, 120];
var redY = [21, 21, 21, 21, 21, 21, 32, 32, 32, 32, 32, 32, 32, 32, 32, 43, 43, 43, 43, 54, 54, 54, 54, 65, 65, 76, 76, 87, 87, 98, 98, 98, 98, 98, 98, 98, 98, 98, 98, 109, 109, 109, 109, 109, 109, 109, 109, 109, 109, 120, 120, 120, 120, 120, 120, 131];
var brownX = [109, 120, 131, 120, 142, 109, 120, 142, 131, 142, 10, 21, 10, 21, 10, 21, 32, 10, 21, 32, 153, 10, 21, 32, 142, 153, 164, 153, 164, 175, 164, 175];
var brownY = [43, 43, 43, 54, 54, 65, 65, 65, 76, 76, 109, 109, 120, 120, 131, 131, 131, 142, 142, 142, 142, 153, 153, 153, 153, 153, 153, 164, 164, 164, 175, 175];
var blueX = [65, 109, 43, 54, 98, 43, 54, 65, 76, 87, 98, 43, 65, 76, 98, 109, 131, 142, 43, 54, 65, 76, 87, 98, 109, 120, 131, 142, 43, 54, 65, 76, 87, 98, 109, 120, 131, 65, 76, 87, 98, 109, 120, 131, 142, 98, 109, 120, 131, 142];
var blueY = [98, 98, 109, 109, 109, 120, 120, 120, 120, 120, 120, 131, 131, 131, 131, 131, 131, 131, 142, 142, 142, 142, 142, 142, 142, 142, 142, 142, 153, 153, 153, 153, 153, 153, 153, 153, 153, 164, 164, 164, 164, 164, 164, 164, 164, 175, 175, 175, 175, 175];
var yellowX = [54, 87];
var yellowY = [131, 131];
for (var i = 0; i <= blackX.length; i++) {
context.fillRect(blackX[i],blackY[i],10,10);
}
context.fillStyle = "tan";
for (var i = 0; i <= tanX.length; i++) {
context.fillRect(tanX[i],tanY[i],10,10);
}
context.fillStyle = "red";
for (var i = 0; i <= redX.length; i++) {
context.fillRect(redX[i],redY[i],10,10);
}
context.fillStyle = "brown";
for (var i = 0; i <= brownX.length; i++) {
context.fillRect(brownX[i],brownY[i],10,10);
}
context.fillStyle = "blue";
for (var i = 0; i <= blueX.length; i++) {
context.fillRect(blueX[i],blueY[i],10,10);
}
context.fillStyle = "yellow";
for (var i = 0; i <= yellowX.length; i++) {
context.fillRect(yellowX[i],yellowZ[i],10,10);
}
}
And the Markup:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<canvas width="300" height="300" id="batman"></canvas>
</body>
</html>
