HTML5 Canvas Layers example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Canvas Layers</title>
	</head>
<body>
	 <h2 style=" color:magenta"><i>canvas layers</i></h2>
    <canvas id="mycanvas" width="250" height="200" style="border:5px solid green"></canvas>
    <script>
        window.addEventListener('load', function () {
            var canvas = document.getElementById("mycanvas");
            var ctx = canvas.getContext("2d");

var order = 0;

function drawLayer1() {
                ctx.fillStyle = "rgb(20,0,10)";
                ctx.fillRect(20, 20, 75, 80);
            }

function drawLayer2() {
                ctx.fillStyle = "rgba(10, 20,900, 9.5)";
                ctx.fillRect(30, 30, 50, 50);
            }

function draw() {
                ctx.clearRect(0, 0, 250, 150);

if (order === 0) {
                    drawLayer1();
                    drawLayer2();
                }
                else {
                    drawLayer2();
                    drawLayer1();
                }
            }

setInterval(draw, 100);
            setInterval(function () {
                order = 1 - order;
            }, 200);
        }, false);
    </script>
</body>
</html>

Note: We DO NOT save your trial code in our database.

HTML5 > Canvas Layers

Write code here

Output