HTML and CSS Reference
In-Depth Information
F
IGURE
2-4 Drawing a canvas smiley
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
Canvas Face Example
</title>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineWidth = 5;
/* create a frame for our drawing */
context.beginPath();
context.fillStyle = "blue";
context.moveTo(50,20);
context.arcTo(280,20,280,280,30);
context.arcTo(280,280,20,280,30);
context.arcTo(20,280,20,20,30);
context.arcTo(20,20,280,20,30);
context.stroke();
context.fill();
