First use HTML5 <canvas> element to hold a image position. The canvas declares a HTML rendered graphics, and can be accessed by Javascript later.
<canvas id="plt" height=40 width=400></canvas>
Draw something using javascript on the canvas:
<script language=javascript>
function draw()
{
var canvas=document.getElementById("plt");
var c = canvas.getContext('2d');
c.fillStyle='#aaaaaa';
c.fillRect(0,0,400,40);
}
function clrpic()
{
var cvs = document.getElementById("plt");
if (cvs.getContext)
{
var c = cvs.getContext("2d");
c.clearRect(0,0,500,500);
}
}
</script>
<br>
<canvas id=c height=40 width=400></canvas>
<input type="button" style="width:100px;height:24px;font-size:15px"
onClick='draw();' value="Start Draw">
The getContext('2d') method of <canvas> element returns a graphics object, which contains various properties and drawing methods.
Following is a list of these methods of a graphics object 'c':
Properties
Description
c.font ='normal 12pt courier'
Set/Get font size, weight and font family
c.lineWidth =2
Set/Get line width, default is 1
c.lineDashOffset =2
Set line dash offset
c.textAlign ="center"
Set/Get the text alignment
c.strokeStyle ='#333'
Set/Get color, gradient and pattern for stroke() method
c.fillStyle ='#333'
Set/Get color, gradient and pattern for fill() method
c.textBaseline ="middle"
Set/Get text baseline, e.g. top, hanging, middle, alphabetic, ideographic, bottom
c.shadowColor ="gray"
Set/Get shadow color
c.shadowBlur =14
Set/Get blur level of shadow, a positive float
c.shadowOffsetX =5
Set/Get X offset of shadow
c.shadowOffsetY =5
Set/Get Y offset of shadow
c.lineCap ="round"
Set/Get line end cap, values include round, square, butt(default)
c.miterLimit =3
Set/Get miter length of line
c.globalAlpha =0.4
Set transparency (0-1)
c.globalCompositeOperation ="copy"
Set/Get how to draw an image onto another, values: source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, xor
Methods
Description
c.beginPath()
Begin a path
c.closePath()
Return the path
c.fill()
Fill the path
c.stroke()
Draw the current path
c.moveTo(x,y)
Move the path to point x,y
c.lineTo(x,y)
Create a line to point x,y in current path
c.setLineDash([2,8])
Set Line Dash Pattern
c.save()
Save the current context
c.rect(x,y,w,h)
Creat a rectangle with the upper left point x,y, and width w, height h
c.fillRect(x,y,w,h)
Creat a filled rectangle with the upper left point x,y, and width w, height h
c.strokeRect(x,y,w,h)
Creat a rectangle which border can be stroked
c.clearRect(x,y,w,h)
Clear a rectangle area within a rectangle
c.arc(x,y,r,s,e,d)
Create an arc; r: radium; s/e: start/end angle; d: clockwise, default is not
c.arcTo(x1,y1,x2,y2,r)
Create an arc from point x1,y1 to point x2,y2;
c.bezierCurveTo(bx1,by1,bx2,by2,x,y)
Create a cubic Bezier curve to point x,y
c.quadraticCurveTo(x1,y1,x2,y2)
Create a quadratic Bezier curve to point x2,y2
c.isPointInPath(x,y)
Check whether point x,y is in current path
c.fillText("test",x,y)
Write "test" at point x,y
c.strokeText("test",x,y)
Write "test" at point x,y, which can be stroked later
c.measureText("test").width
Measure the width of "test"
c.scale(w,h)
Scale current drawing with width w times, height h times
c.clip(path,fill)
Turn the path into the clip path; fill: nonzero or evenodd
c.rotate(x)
Rotate the path in x radians
c.translate(x,y)
Remaps the drawing at point x,y
c.transform(a,b,c,d,e,f)
Set current transformation; a&b:horizontal scaling & skewing, c&d:vertical skewing & scaling, e:horizontal moving, f:vertical moving
c.setTransform(a,b,c,d,e,f)
Reset current transformation;
c.drawImage(m,x,y)
Draw image m at point x,y
c.createImageData(w,h,d)
Create an image data with width w, height h
c.getImageData(x,y,w,h)
Get image data from point x,y, with width w, height h
