JavaScript canvas introduction

-

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

<html>
<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)
context.stroke()
</script>
</html>

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

Comments

Post a Comment

Popular posts from this blog

What is 'this.' keyword in JavaScript

-
In JavaScript 'this' is an object and a reference to the current object that is used to get and to set properties of the current object. Take for instance within a function; const func = function (name){     this.name = name } func.name instance property name is set to that of the first argument; const inst = new func('duke') inst.name // returns duke You can as well extend func to set name using 'this'; func.prototype.set = function(name){     this.name = name } Running the previous instance with this set method; inst.set('John') // returns John
Read more

How to iterate array elements using 'for loop' in JavaScript

-
JavaScript arrays are similar to arrays in c and in c like programming languages such as php among others In JavaScript arrays are simply collections of elements for instance Objects Numbers or other Arrays Declaring an array An array may be declared using the array constructor for instance const array = new Array() or as const array = [] Iterating an array using 'for' loop This is the implest and most common method to iterate an array is by using the 'for loop' am sure you're familiar with the syntax. take for Instance you want to iterate an array of integers and print each one of them. var ints = [1, 2, 3, 4] To iterate ints using for loop. for (var i = 0; i < ints.length; i++){         console.log(ints[i]) } // output will be // 1 // 2 // 3 // 4 In between the parentheses they are three procedures in three segments separated by colons first segment declares var i an index which gets incriminated in the third segment as long as it's less
Read more