محرر ويب أونلاين

<!DOCTYPE html>
<html>
    <body>
		
		<canvas id="myCanvas" height="300" width="300">
			Your browser does not support the canvas tag!
		</canvas>
		
		
		<script>
			var c = document.getElementById("myCanvas");
			
			// ctx بداخل المتغير c الذي يملكه المتغير Context هنا قمنا بتخزين الكائن
			// بواسطة هذا المتغير يمكننا إستدعاء جميع الخصائص و الدوال المخصصة للرسم
			var ctx = c.getContext("2d");
			
			// هنا قمنا بتحديد أن الشيء التالي الذي سيتم تلوينه سيكون لونه أحمر
			ctx.fillStyle = "red";
			
			// هنا قمنا برسم مستطيل يبعد 20 بكسل من اليسار, 20 بكسل من الأعلى, عرضه 75 و طوله 50
			ctx.fillRect(20, 20, 75, 50);
			
			// هنا قمنا بتحديد أن الشيء التالي الذي سيتم رسمه سيتم جعله شفافاً بنسبة 40% من لونه
			ctx.globalAlpha = 0.4;
		
			// هنا قمنا بتحديد أن الشيء التالي الذي سيتم تلوينه سيكون لونه أزرق
			ctx.fillStyle = "blue";
		
			// هنا قمنا برسم مستطيل يبعد 50 بكسل من اليسار, 50 بكسل من الأعلى, عرضه 75 و طوله 50
			ctx.fillRect(50, 50, 75, 50);
		
			// هنا قمنا بتحديد أن الشيء التالي الذي سيتم تلوينه سيكون لونه أخضر
			ctx.fillStyle = "green";
		
			// هنا قمنا برسم مستطيل يبعد 80 بكسل من اليسار, 80 بكسل من الأعلى, عرضه 75 و طوله 50
			ctx.fillRect(80, 80, 75, 50);
		</script>
    </body>
</html>