INTERACTIVE MEDIA DESIGN (Finals): Canvas Drawing

CODE:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Canvas Drawing</title>
</head>

<body>
<canvas id="myCanvas" width="1345.5" height="603.5"
style="border:1px solid #000000;">
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.globalAlpha = 0.8
ctx.fillStyle = "#B89BED";
ctx.fillRect(500,110,283,353);

ctx.fillStyle = "#ABDCE8";
ctx.fillRect(800,110,90,353);

ctx.fillStyle = "#EBBBF1";
ctx.fillRect(300,110,90,353);

ctx.fillStyle = "#8300e0";
ctx.fillRect(707,128,3,315);

ctx.fillStyle = "#0a00cf";
ctx.fillRect(715,128,5,315);

ctx.fillStyle = "#8300e0";
ctx.fillRect(725,128,10,315);

</script>
</body>
</html>



RESULT:



Comments

Popular Posts