JavaScript canvas introduction

Probably next monday I will post a how to make a snake game clone in a few lines of JavaScript code post don't miss it out subscribe to my email newsletter!

What is a canvas
I'm sure you've heard of the term somewhere. canvas through their "2d" context allow drawing 2d graphics using a simple JavaScript api

You can use a canvas to draw text , lines simple shapes, and images
canvas can also be used as a renderer for JavaScript built html5 games "that's were we're going"

Example on canvas
it draws a rectangle on a canvas context black color by default

<canvas id="canvas"></canvas>
<script type="text/javascript">
        var context = canvas.getContext("2d")
// stroke a 100px square at 0, 0
context.rect(0, 0, 100, 100)

Save and open it in your browser you should see a square on the top right corner of your browse window


Popular posts from this blog

How to set content disposition header for nginx server to force content download

Animated daylight on HTML5 Canvas

How to make a static http server in nodejs using express

JS13K Preparation

Adding Gameover and introduction screen on HTML Canvas