function drawPath(context){
context.strokeStyle = "#000000";
context.lineWidth = 10;
context.beginPath();
context.moveTo(50, 50);
context.lineTo(100, 0);
context.lineTo(200, 200);
context.lineTo(300, 150);
context.stroke();
context.closePath();
}
All HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script type="text/javascript">
function canvasloader(){
var mycanvas = document.getElementById("canvas");
var mycontext = mycanvas.getContext("2d");
mycontext.fillStyle = "#A0A0A0";
mycontext.fillRect(10, 10, 300, 220);
mycontext.fillStyle = "#00ff00";
mycontext.fillRect(20, 20, 200, 100);
mycontext.fillStyle = "#0000ff";
mycontext.fillRect(200, 100, 100, 100);
drawPath(mycontext);
}
function drawPath(context){
context.strokeStyle = "#000000";
context.lineWidth = 10;
context.beginPath();
context.moveTo(50, 50);
context.lineTo(100, 0);
context.lineTo(200, 200);
context.lineTo(300, 150);
context.stroke();
context.closePath();
}
function capturecanvas(){
var mycanvas = document.getElementById("canvas");
window.open(mycanvas.toDataURL(),
"canvasImage",
"left=0," +
"top=0," +
" width=" + mycanvas.width + "," +
"height=" + mycanvas.height);
}
</script>
</head>
<body onload="canvasloader();">
<h1>Hello HTML5 canvas</h1>
<canvas id="canvas" style="border: 1px solid;" width="320" height="240">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
<input type="button" id="capture" value="Capture Canvas" onclick="capturecanvas();">
</form>
</body>
</html>
No comments:
Post a Comment