How to add the lineCap property to the canvas?

Question

I'm trying to change the lineCap property to "round" on the canvas of the TimeCircles plugin.

$(document ).ready(function() {
  var c = document.getElementsByTagName('canvas');
  var ctx = c.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineWidth = 15;
  ctx.lineCap = 'round';
  ctx.lineTo(100, 100);
  ctx.stroke();
});

What is missing? Complete code in CodePen.

Answer 1

var c = document.getElementsByTagName('canvas'); returns an array with all the canvas elements.

Array doesn't have getContext method. So simply select the canvas by adding [0] like the following.

$(document ).ready(function() {
  var c = document.getElementsByTagName('canvas')[0];
  var ctx = c.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineWidth = 15;
  ctx.lineCap = 'round';
  ctx.lineTo(100, 100);
  ctx.stroke();
});

Demo: CodePen