Draw error in canvas - Javascript Canvas

Javascript examples for Canvas:Draw

  1. HOME
  2. Javascript
  3. Canvas
  4. Draw

Description

Draw error in canvas

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from  ww w.ja  va 2  s. c o m
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
    var t = setTimeout("resize()", 200);
else
    resize();
function resize() {
    var innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var targetWidth = 800;
    var targetHeight = 600;
    window.resizeBy(targetWidth-innerWidth, targetHeight-innerHeight);
}
function canvas_arrow(context, fromx, fromy, tox, toy){
    var headlen = 20;   // length of head in pixels
    var dx = tox-fromx;
    var dy = toy-fromy;
    var angle = Math.atan2(dy,dx);
    context.moveTo(fromx, fromy);
    context.lineTo(tox, toy);
    context.lineWidth=2;
    //context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
    context.moveTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
    context.moveTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
}
$('document').ready(function(){
    var count= parseInt($("canvas").length);
    for(var i=0; i< count; i++){
        var ctx= $("canvas")[i].getContext('2d');
        var temp= $("canvas")[i].id;
        if(temp.indexOf("text") != -1){
                ctx.font="15px Times New Roman";
                ctx.fillText("I Love My Mom",10,10);
            }
        else{
            if(temp.indexOf("arrow") != -1){
                ctx.beginPath();
                canvas_arrow(ctx,10,10,100,10);
                ctx.stroke();
            }
        }
    }
});
    });

      </script> 
   </head> 
   <body> 
      <div>
         LOLLL
      </div> 
      <div style="overflow:hidden;height:30px;"> 
         <canvas id="text_1" width="120"></canvas> 
         <canvas id="arrow_1" width="120"></canvas> 
         <canvas id="text_1" width="120"></canvas> 
         <canvas id="arrow_2" width="120"></canvas> 
         <canvas id="text_1" width="120"></canvas> 
         <canvas id="arrow_2" width="120"></canvas> 
         <canvas id="text_1" width="120"></canvas> 
         <canvas id="arrow_2" width="120"></canvas> 
         <canvas id="text_1" width="120"></canvas> 
         <canvas id="arrow_2" width="120"></canvas> 
         <canvas id="arrow_2" width="120"></canvas> 
      </div> 
      <div>
         MISSSSSS
      </div> 
      <div>
         MOMMMM
      </div>  
   </body>
</html>

Related Tutorials