JavaScript Canvas

JavaScript Basics

JavaScript Basics

JavaScript Home

JavaScript Introduction

JavaScript Where To

JavaScript Output

JavaScript Statements

JavaScript Syntax

JavaScript Comments

Variables and Data Types

JavaScript Events

JavaScript Strings

JavaScript String Methods

JavaScript Variables

JavaScript Const

JavaScript Data Types

JavaScript Type Conversion

JavaScript Operators

JavaScript Arithmetic

JavaScript Assignment

JavaScript Logical

JavaScript Bitwise

JavaScript If Else

JavaScript Switch

JavaScript Loop For Of

JavaScript Loop For In

JavaScript Loop For of

JavaScript Loop While

JavaScript Break

JavaScript Iterables

JavaScript Arrays

JavaScript Array Methods

JavaScript Array Search

JavaScript Array Sort

JavaScript Array Iteration

JavaScript Array Const

JavaScript Functions

JavaScript Function Parameters

JavaScript Function Invocation

JavaScript Function Call

JavaScript Function Apply

JavaScript Function Bind

JavaScript Function Closures

JavaScript Objects

JavaScript Object Definitions

JavaScript Object Properties

JavaScript Object Methods

JavaScript Object Accessors

JavaScript Object Constructors

Javascript Object Prototypes

JavaScript Object Prototypes

JavaScript Object Sets

JavaScript Object Maps

JavaScript Versions

JavaScript Versions

JavaScript 2009 (ES5)

JavaScript 2015 (ES6)

JavaScript 2016

JavaScript 2017

JavaScript 2018

JavaScript 2019

JavaScript 2020

JavaScript 2021

JavaScript 2022

JavaScript 2023

JavaScript IE/EDGE

JavaScript History

Asynchronous JavaScript

JavaScript Asynchronous

JavaScript Callbacks

JavaScript Promises

JavaScript Async/Await

DOM Manipulation

JavaScript DOM Intro

JavaScript DOM Methods

JavaScript DOM Document

JavaScript DOM Elements

JavaScript HTML DOM

JavaScript DOM Forms

JavaScript DOM CSS

JavaScript DOM Animations

JavaScript DOM Events

JavaScript DOM Event Listener

JavaScript DOM Navigation

JavaScript DOM Nodes

JavaScript DOM Collections

JavaScript DOM Node Lists

Browser Object Model (BOM)

JavaScript Window

JavaScript Screen

JavaScript Location

JavaScript History

JavaScript Navigator

JavaScript Popup Alert

JavaScript Timing

JavaScript Cookies

JavaScript Web API Intro

JavaScript Web Forms API

JavaScript Web History API

JavaScript Web Storage API

JavaScript Web Worker API

JavaScript Web Fetch API

JavaScript Web Geolocation API

JavaScript Graphics

JavaScript Canvas

JavaScript Plotly

JavaScript Chart.js

JavaScript Google Chart

JavaScript D3.js

JavaScript Canvas

HTML Canvas

HTML Canvas is ideal for creating various types of plots and graphs:

Scatter Plots
Line Graphs
Combined Scatter and Line Graphs

Scatter Plots

Source Code:

const xArray = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
const yArray = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];

// Plot Scatter
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length; i++) {
  let x = xArray[i] * 400 / 150;
  let y = yArray[i] * 400 / 15;
  ctx.beginPath();
  ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}

‍

Line Graphs

Source Code:

let xMax = canvas.width;
let slope = 1.2;
let intercept = 70;

// Plot Line
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();

// Line Function
function f(x) {
  return x * slope + intercept;
}

‍

Combined Scatter and Line Graphs

Source Code:

let xMax = canvas.width;
let slope = 1.2;
let intercept = 70;

const xArray = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
const yArray = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];

// Plot Scatter
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length; i++) {
  let x = xArray[i] * 400 / 150;
  let y = yArray[i] * 400 / 15;
  ctx.beginPath();
  ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}

// Plot Line
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, f(xMax));
ctx.strokeStyle = "black";
ctx.stroke();

// Line Function
function f(x) {
  return x * slope + intercept;
}

‍

Take a look into your desired course

Register for free