A lineCap example

by Ju Oliveira

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap -->

<!--<canvas id="canvas" width="150" height="150"></canvas>
<canvas id="canvas2" width="150" height="150"></canvas>-->

<canvas id="utilizados" width="15" height="10"></canvas>
<canvas id="adquiridos" width="15" height="10"></canvas>

JavaScript

//var ctx = document.getElementById('canvas').getContext('2d');
//var ctxs = document.getElementById('canvas2').getContext('2d');
var lineCap = ['butt','round','square'];

// Draw guides
//ctxs.strokeStyle = '#09f';
//ctxs.beginPath();
//ctxs.moveTo(10, 10);
//ctxs.lineTo(140, 10);
//ctxs.moveTo(10, 140);
//ctxs.lineTo(140, 140);
//ctxs.stroke();

// Draw lines
//ctxs.strokeStyle = 'black';
/*for (var i = 0; i < lineCap.length; i++) {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap[i];
  ctx.beginPath();
  ctx.moveTo(25 + i * 50, 10);
  ctx.lineTo(25 + i * 50, 140);
  ctx.stroke();
}*/


    var ctxs = document.getElementById('utilizados').getContext('2d');
    ctxs.strokeStyle = 'rgb(33, 153, 232)';
    ctxs.lineWidth = 4;
    ctxs.lineCap = "square";
    ctxs.beginPath();
    ctxs.moveTo(0, 4);
    ctxs.lineTo(15, 4);
    ctxs.stroke();

    var ctx = document.getElementById('adquiridos').getContext('2d');
    ctx.strokeStyle = 'rgb(203, 228, 245)';
    //ctx.lineWidth = 6;
    ctx.lineCap = "square";
    ctx.beginPath();
    ctx.moveTo(0, 5);
    ctx.lineTo(0, 10);
    ctx.lineWidth = 7;
    //ctx.strokeStyle = 'red';
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(6, 8);
    ctx.lineTo(6, 10);
    ctx.lineWidth = 5;
    //ctx.strokeStyle = 'black';
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(10, 0);
    ctx.lineTo(10, 10);
    ctx.lineWidth = 4;
    //ctx.strokeStyle = 'green';
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(15, 6);
    ctx.lineTo(15, 10);
    ctx.lineWidth = 6;
    //ctx.strokeStyle = 'blue';
    ctx.stroke();