Canvas Test

by Fiddel

HTML

<div><canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
</div>

CSS

div {width:1000px;}
canvas {
  display:inline-block;
  width:30%;
  height:30%;
  float:left; 
  padding-right:50px;
  box-sizing:content-box;
  border:1px solid red;
}

JavaScript

function canvasRects() {
  var canvas = document.getElementById("canvas1");
  if(canvas.getContext){
    var content  = canvas.getContext("2d");

    content.fillStyle = "rgb(255,0,0)";
    content.fillRect(0, 20, 80, 80);

    content.fillStyle = "rgba(0, 255, 255, 0.5)";
    content.fillRect(60, 50, 40, 20);

    content.fillStyle = "rgba(0, 255, 255, 0.5)";
    content.strokeRect(50,50,50,50);

  }
}canvasRects();
    
    
function canvasTriangle() {
  var canvas = document.getElementById('canvas2');
  if (canvas.getContext){
    var content = canvas.getContext('2d');
    content.beginPath();
    content.moveTo(40,50);
    content.lineTo(0,75);
    content.lineTo(0,25);
    content.fill();
    content.fillStyle = "rgba(0, 255, 255, 0.5)";
  }
}canvasTriangle();