HTML5 Canvas For Beginners | Getting Started | 01 with Webpack

Video Tutorial

Overview

So if you are familiar with seeing very nice particles on a website or animated shapes roaming around, and you have been wondering how can I achieve such things? Well, it is all being done using the HTML5 Canvas Technology, So that what we are going to learn in today’s tutorial, Watch the Video Above for more Detailed Instructions.

Getting Started

As almost any Web app should, we are going to use NodeJS for package management, and also web pack for assets compiling and dependencies. First, install Nodejs, webpack is a module from npm so just initialize your project and install it as a development dependency.

#Make Sure to install Node JS 
npm init -y 
npm install webpack --save-dev
# this gonna download and install webpack for you

here is our Project tree

--dist
   bundle.js ///< Compiled JS file with webpack 
   index.html ///< Main Index HTML 
--node_modules
    ///< Contains all the Installed node modules
--src
   index.js ///< Main Renderer for our app, compiled using webpack into dist/bundle.js
|
package.json ///< Node JS Package file 
webpack.config.js ///< Our Webpack Configuration

Now for webpack to work correctly you need to create the configuration file (webpack.config.js), specifying the entry file and setting the watch to TRUE

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "./dist/bundle.js"
    },
    watch: true
};

Also, make sure to add the watch script to package.json for running webpack watch (For Compiling), here is how the package.json should look like

{
    "name": "particles-js",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "webpack --watch"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^3.9.1"
    },
    "dependencies": { ///< You can Also install thos dependencies, for more advanced usage 
        "jquery": "^3.2.1",
        "lodash": "^4.17.4",
        "mouse-speed": "^1.0.5"
    }
}

run the script and include the bundle.js on your index.html

npm run watch

and include

Testing

Now try to add a canvas element to your main index.html fie, then reference it using JS and get the Rendering Context

var canvas = document.getEelementById('#main-canvas'); ///< Our Element has an ID (main-canvas)
//Stretch it to fit the full screen width and height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

//Getting Context
var ctx = canvas.getContext('2d');

//Rendering a Simple Triangle
ctx.beginPath();
ctx.rect(100, 50, 140, 74); ///< x, y, width, height
ctx.stroke(); ///< Render Showing the Stroke

Now try compiling first, since you are including the bundle js file in your HTML and Refresh the Page, you should see a Rect on the screen if everything is set Correctly.

Refer to the Video Tutorial for More Detailed Instructions.

What’s Next

So this was the setup, in the next tutorials in the Series we are to learn more about the Canvas API, for drawing more shapes and styling it, also at the end, we are going to implement a very nice animation/circles-text-forming using the canvas.

No Comments Yet