jquery - Canvas arrow is not shown in Chrome -


i have drawn arrow in canvas using below code.

  window.onload = function() {     var canvas   = document.getelementbyid("arrow");     var context  = canvas.getcontext("2d");      context.beginpath();     context.strokestyle  = "red";     context.fillstyle    = "red";      context.moveto(150, 400);     context.lineto(400, 400);     context.lineto(375, 375);     context.arcto(400, 400, 375, 425, 35);      context.lineto(400, 400);     context.stroke();     context.fill();   }); 

but arrow not shown on screen.

in html5 spec, canvas element has default coordinate size of 300×150px.

if use css resize canvas to, say, 500×500px, canvas coordinates stretched (300, 150) still bottom right of canvas: http://jsfiddle.net/mh4uh/

you need apply canvas width , height property:

<canvas id="arrow" width="500" height="500"></canvas> 

alternatively, can use javascript set width , height match on-screen dimensions (http://jsfiddle.net/mh4uh/1/):

canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; 

see also: canvas default size


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -