<script> window.onload = function() { var canvas = document.getElementById('quadro'); var ctx = canvas.getContext('2d'); ctx.strokeStyle = '#f00'; ctx.lineWidth = 2; ctx.strokeRect(30,30, 80,40); ctx.strokeStyle = '#00f'; ctx.lineWidth = 4; ctx.strokeRect(130,100, 140,90); ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.fillStyle = 'rgba(0,255,0,0.4)'; ctx.fillRect(150,60, 200,70); ctx.strokeRect(148,58, 204,74); } </script>
canvas {border:1px solid #ccc;}
<canvas id="quadro" width="400" height="200"> <p>Conteúdo alternativo para navegadores que não suportam canvas.</p> </canvas>