HTML Canvas lineCap square

Description

HTML Canvas lineCap square

View in separate window 

//Basic Paths/*w  w  w.ja v  a 2 s  .  c o  m*/
<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="640" height="280" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');
   
    context.strokeStyle = "black";
    context.lineWidth=10;
    context.lineCap='square';
    context.beginPath();
    context.moveTo(20, 0);
    context.lineTo(100, 0);
    context.stroke();
    context.closePath();


</script>

</body>
</html>



PreviousNext

Related