Prev Demo
HTML5
>
Rectangle On Canvas
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html/> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <canvas id="myCanvas" width="578" height="250"></canvas> <br /> <input type="button" onclick="DrawRectangle()" value="Draw Rectangles" /> <script type="text/javascript"> function DrawRectangle() { var context = document.getElementById('myCanvas').getContext('2d'); context.beginPath(); context.lineWidth = "5"; // rect(x, y, rectangle-width, rectangle-height); context.strokeRect(10, 10, 50, 100); context.fillStyle = "Red"; context.fillRect(20, 20, 30, 50); context.strokeStyle = "green"; context.strokeRect(150, 100, 100, 100); context.globalAlpha = 0.5; context.fillStyle = "red"; context.fillRect(200, 150, 100, 100); } </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
