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
Post a Comment