HTML and CSS Reference
In-Depth Information
However you decide to place it, once an image is on the canvas , it is then possible to
draw on it. The following example loads an image and draws a region in preparation for
eventually adding a caption:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> canvas drawImage() Example </title>
<style type="text/css">
canvas {border: 1px solid black;}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "dog.jpg";
img.onload = function(){
context.lineWidth = 5;
context.drawImage(img,0,0,400,400);
context.beginPath();
context.lineWidth = 5;
context.fillStyle = "orange";
context.strokeStyle = "black";
context.rect(50,340,300,50);
context.fill();
context.stroke();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400">
<strong> Canvas Supporting Browser Required </strong>
</canvas>
</body>
</html>
O NLINE http://htmlref.com/ch2/canvasimage.html
Text Support for canvas
In browsers that supported early forms of the canvas element, text was not well supported
in a drawing, if at all. Per HTML5, text functions should now be supported by the canvas
API, and several browsers already do support it. You can write text by using fillText
( text ,x, y [,maxWidth] ) or strokeText( text , x , y [,maxWidth] ) . Both functions
take an optional last parameter, maxWidth , that will cut the text off if the width is longer
than specified. Often, both fillText() and strokeText() will be utilized to display an
outline around the text. Here we set a fill color of blue and then write the phrase “Canvas is
great!” with a black stroke around the letters.
Search WWH ::




Custom Search