HTML Canvas lineJoin round

Description

HTML Canvas lineJoin round

View in separate window 


<!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>


//Ch2Ex3 Basic Line Joins
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');
    //round enbevel join, at top left of canvas
    context.strokeStyle = "black"; //need list of available colors
    context.lineWidth=10;//from   ww  w.  j ava  2s  . co  m
    context.lineJoin='bevel';
    context.lineCap='round';
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(25, 0);
    context.lineTo(25,25);
    context.stroke();
    context.closePath();
    
    //round end, bevel join, not at top or left of canvas
    context.beginPath();
    context.moveTo(10, 50);
    context.lineTo(35, 50);
    context.lineTo(35,75);
    context.stroke();
    context.closePath();
    
    //flat end, round join, not at top or left
    context.lineJoin='round';
    context.lineCap='butt';
    context.beginPath();
    context.moveTo(10, 100);
    context.lineTo(35, 100);
    context.lineTo(35,125);
    context.stroke();
    context.closePath();



</script>

</body>
</html>



PreviousNext

Related