Introduction: Drawing Squares With Html5 on an Html5 Canvas

In the last tutorial we made an html5 canvas.So what is a canvas without stuff on THAT canvas.So when creating a shape you would probably want color RIGHT? to make a fill color you need to have some code that looks like this -

ctx.fillStyle = "#F00000";

That will set the fill color to black, but you won't see anything because we didn't draw the square yet the code for a square is -

ctx.fillRect(0,0,50,50);

That will draw a square at the coordinates 0X 0Y and the width would be 50 so the height must be 50.

Good now we can look at the whole html5 file and that will look like this -

<html>

<canvas id = "canvas" width = "400" height="400"></canvas>

<script>

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "#F00000";

ctx.fillRect(0,0,50,50);

</script>

</html>



Comments

author
gogoguy (author)2014-11-10

Thanks sooooooooo much!

author
Coder0806 (author)gogoguy2014-11-10

Your welcome

author
Coder0806 (author)2014-10-23

LOL sry it will make a RED square not a black one

About This Instructable

593views

7favorites

License:

More by Coder0806:Java Programming Part2(Text and running)Drawing squares with html5 on an html5 canvasHow to use the html5 Canvas tag
Add instructable to: