Canvas How to - Draw cross lines

Question

We would like to know how to draw cross lines.

Answer


<!--from  www  .  jav a 2  s. co  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(canvas.width, canvas.height);
    ctx.stroke();
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(canvas.width, 0);
    ctx.lineTo(0, canvas.height);
    ctx.stroke();
}//]]>  
</script>
</head>
<body>
  <div id="canvasContainer">
    <canvas id="myCanvas"></canvas>
</div>
</body>
</html>

The code above is rendered as follows: