Let's look at the JavaScript functions that allow the new canvas element to draw rectangles.
fillRect(x,y,width,height) strokeRect(x,y,width,height)
In order:
fillRect(x,y,width,height)
draws a filled rectangle. Next,
strokeRect(x,y,width,height)
draws an outline around the rectangle.
Now, let's draw some shapes.
We'll start with our basic canvas code and incorporate our new functions:
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/ jquery.min.js"></script>
<script>
$(document).ready(function() {
var canvas = document.getElementById("FirstCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(10, 10, 396, 236);
ctx.fillStyle = "red";
ctx.fillRect(11, 11, 100, 100);
ctx.fillStyle = "white";
ctx.fillRect(111, 11, 34, 100);
ctx.fillStyle = "red";
ctx.fillRect(156, 11, 249, 100);
ctx.fillStyle...