In this post we will be discussing canavas in javascript. and creating a sine-wave in javscript step wise. This will going to be awesome as we will be using short trick but with customizations.

so you might be having many questions such as:

• What is canvas JS?

• What is canvas method?

• What is purpose of canvas tag?

• How do you draw on canvas?

• What is canvas method?

• What is purpose of canvas tag?

• How do you draw on canvas?

The ultimate answer to them are:

<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript).

This can, for instance, be used to draw graphs, combine photos, or create simple animations.

live preview

you may visit the demo on codepen sine-wave

Does it worth learning?

And definitely yes!, worth learning. I don't believe any 2d games could ever be created without coding.

Advantage over other methods?

Canvas is supported in all browsers and gives the users of your website a chance to try out something witout any installations.

This is its best advantage.

Our key plan.

• 1. html for the code
• 1. How will it be looking that is css.
• 1. Javascript.

We will be first defining html , css then most important javascript for our sinewave.

Let's start with html part of the code.

Let's start coding!

Html part of our code!

Give your webpage a suitable title then insert these script for jquery & p5.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>

CSS part.

There is almost nothing to style via css as canavas will do for us.

body {
    margin: 0;
    background: rgb(0,0,0);
    user-select: none;
}

#Ampslider {
    position: absolute;
    bottom: 60px;
    left: 10px;
}

#Ampdisplay {
    position: absolute;
    bottom: 40px;
    left: 30px;
    color: #fff;
}

Now, comes the main part.

Let's start creating sine wave in javascript. Declare strict as below:

"use strict";

Creating variables

now after this we will creating a variable for amplitude display of the sinewave with other 3.

//variables
let ampdisplay;
let ofset = 0;
let slider,amp;

Creating the setup() function.

Now, create a function as setup() which will create the canvas with the specified width and height accordingly. (don't worry at last we will seeing).

//functions
function setup() {

    createCanvas(windowWidth,windowHeight);
    ampdisplay = createSpan().id("Ampdisplay");

    //initializing slider
    slider = createSlider(0, 100, 50, 1).id("Ampslider");

    //initializing amplitude
    amp = slider.value();

    //seting up strokewidth
    stroke(255);
}

as you will be able to see we intilized slider for amplitude adjustment and strokewidth so , whenever we drag up the slider the ampltitude of the sine-wave will change in realtime this will be done using .on().

Setting up the draw function

The draw function will be drawing the sinewave on the canvas.

function draw() {


    ampdisplay.html(`amplitude = ${slider.value()} px`);
    background(0, 5);
    amp = slider.value();
    line(ofset, height/2, ofset, height/2 - amp*sin(frameCount*0.05));
    ofset += 0.5;

    if(ofset>width) {

        background(0);
        //starting from left screen side again
        ofset = 0;
    }
}

First we displayed the amplitude ob the canavas then, we cleared the canvas & set the lower global alpha values before updating animation by background(0, 5).

then get new amplitude on change of slider position after that we will move next line a bit to the right by using ofset += 0.5 thus, we defined the draw() function.

AT last, clearing semi-transparent trace to background '0' starting from left screen side again & again as a loop!

Creating a function to resize window

This function will the resize the canvas according to device's width & height.

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}