Edit in JSFiddle

//var canvas = document.getElementById("mycanvas");
//var context = canvas.getContext("2d");

// 描画するためのコンテキストを取得
var context = $("#mycanvas")[0].getContext("2d");

context.fillRect(10, 10, 100, 100);

context.fillStyle = "#00bfff";
context.fillRect(20, 20, 50, 100);


c=$('canvas')[0].getContext('2d');
c.beginPath();
c.moveTo(150,20);
c.lineTo(250, 130);
c.lineTo(50, 130);
c.closePath();

c.stroke();
c.fill();
c.fillStyle = 'red';
c.fill();

<canvas id="mycanvas" width="224" height="224"></canvas>
<!-- <canvas id="sample" width=300 height=150></canvas> -->

canvas {
  border: solid 1px #999;
}