JavaScript+Canvas: Plot a function graph

Question

JavaScript+Canvas: Plot a function graph

Create a web page displaying the graph of the function y=ax^2+bx+c On the page, we set the values of the variables a, b,c and the border area for x,y.

Place the graph on a canvas (canvas type element) with a size of 300 by 200 points.
The parameters of the function and the drawing area are set on the form. Organize the verification of the correctness of the input of this data.
The button has two values "Draw" and "Clear". When you click on the button in the state "Draw" on the canvas displayed the graph of the function with the specified parameters, and when you click in the "Clear" state, the canvas is cleared (only the graph is deleted).
The coordinate axes should be highlighted by the color or thickness of the line and pass through zero if it is in the area, or pass along the border of the area closest to zero.
The color of the function must be different from the color of the axes and the coordinate grid.
The 10x10 coordinate grid should be bound to the position of the coordinate axes.
The corresponding numeric values of the drawing area borders should be displayed at the canvas borders, to the left and top of the coordinate axes.

The task caused a difficulty at the stage of drawing the function. I attach here the js code that is available at the moment. Do not judge strictly, the first day was useful in canvas, so please treat it with understanding.

window.onload = () => {
    let step = 20
    let cnvs = document.querySelector('canvas')
    let ctx = cnvs.getContext('2d')



    for (var i = step; i<cnvs.width; i+=step){//вертикальные
        ctx.beginPath();
        ctx.strokeStyle = '#7a7979';
        ctx.lineWidth = 0.5;
        ctx.moveTo(i, 0);
        ctx.lineTo(i, cnvs.height);
        ctx.closePath();
        ctx.stroke();
}
    for (var i = step; i<cnvs.height; i+=step){//Горизонтальные
        ctx.beginPath();
        ctx.moveTo(0, i);
        ctx.lineTo(cnvs.width, i);
        ctx.closePath();
        ctx.stroke();
    }
/*ctx.beginPath()
for(let x = -4; x<4;x++){
    ctx.moveTo(x*z,-cnvs.height/2)
    ctx.lineTo(x*z,cnvs.height/2)
    ctx.moveTo(-cnvs.width/2,x*z)
    ctx.lineTo(cnvs.width/2,x*z)
}
ctx.stroke()*/
//Ось X 
ctx.beginPath();
ctx.moveTo(0, cnvs.height/2);
ctx.lineTo(cnvs.width, cnvs.height/2);
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.closePath();
ctx.stroke()
    
    // ось Y
ctx.beginPath();
ctx.moveTo(cnvs.width/2+10, 0);
ctx.lineTo(cnvs.width/2+10, cnvs.height);
ctx.strokeStyle = 'green';
ctx.closePath();
ctx.stroke();


console.log(cnvs.width)
console.log(cnvs.height)
}

<canvas></canvas>

This image is taken from my course and shows how this task should look like in the final

1

English javascript canvas

Author: Дмытрык, 2020-02-26

Source

1 answers

score 5 · Accepted Answer

Something like that:

// Ваша формула
let y = x => 2*x*x+3*x-1;
let scale = 20;
let step = 1;
let cnvs = document.querySelector('canvas');
let ctx = cnvs.getContext('2d');

ctx.lineWidth = 0.5;

for (var i = step*scale; i < cnvs.width; i += step*scale) { //вертикальные
  polyline('#7a7979', [[i, 0], [i, cnvs.height]]);
}

for (var i = step*scale; i < cnvs.height; i += step*scale) { //Горизонтальные
  polyline('#7a7979', [[0, i], [cnvs.width, i]]);
}

ctx.lineWidth = 2;
let pts = [];
for(let x = -cnvs.width/2; x<cnvs.width/2; x+=5) {
    pts.push([cnvs.width/2+x, cnvs.height/2 - y(x/scale)*scale]);
}
polyline('blue', pts);

//Ось X 
polyline('red', [[0, cnvs.height / 2], [cnvs.width, cnvs.height / 2]]);

// ось Y
polyline('green', [[cnvs.width / 2, 0], [cnvs.width / 2, cnvs.height]]);

function polyline(color, pts) {
  ctx.strokeStyle = color;
  ctx.beginPath();
  pts.forEach((p, i) => i ? ctx.lineTo(...p) : ctx.moveTo(...p));
  ctx.stroke();
}

<canvas width=200 height=200></canvas>