How do I draw multiple things on a Canvas?

I am fairly new to HTML Canvas. This is such a noob question, but why doesn't this code work?

        window.onload = function () {
        var canvas = document.getElementById('canvas1');
        var c = canvas.getContext('2d');

        c.fillStyle = 'rgb(0, 200, 0)';    
        c.fillRect(0, 0, 500, 500);

        c.fillRect(50, 100, 100, 100);

        }

All I am trying to do is get there to be two rectangles on the canvas... A big green one and and a smaller black one. How do I do this?

Answers


Well, what you're doing is drawing two green rectangles. As the second one is inside the first one, you don't see it. You're missing setting the fillStyle property to black after drawing the green rectangle:

window.onload = function () {
    var canvas = document.getElementById('canvas1');
    var c = canvas.getContext('2d');

    c.fillStyle = 'rgb(0, 200, 0)';    
    c.fillRect(0, 0, 500, 500);
    c.fillStyle = 'black';
    c.fillRect(50, 100, 100, 100);

}

Need Your Help

SQL script to insert new records

sql sql-server stored-procedures

I have one table whereas there are 5 millions records available and each day that records add by 20000 to 50000. I want to create script where I can keep old records and add all new records each da...

Change image source on mouseover of parent div element

javascript jquery css mouseevent mouseover

I have an image and rollover image. Using jQuery or CSS, I want to show/hide the rollover image when the onmousemove/onmouseout event happen on the parent div (containing the image).