/* Draw Rectangle */ var ctx = document.getElementById("myCanvas").getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); /* Draw Line */ ctx.moveTo(10, 10); ctx.lineTo(190, 90); ctx.stroke(); /* Draw Circle */ ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.strokeStyle = '#0000ff'; ctx.stroke(); /* Draw Gradient Rectangle */ // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 110, 150, 180); /* Draw Text */ ctx.fillStyle = "#00FF00"; ctx.font = "30px Arial"; ctx.strokeStyle = '#808080'; ctx.fillText("Hello World", 10, 150); ctx.strokeText("Hello World", 10, 90);
<canvas id="myCanvas" width="200" height="600"></canvas>