Drawing shapes and text

Canvas

Canvas graphics are drawn onto the <canvas> element, which can be given a width and a height in pixels.

There are two types of drawing: "2d" for two-dimensional graphics and "webgl" for three-dimensional graphics through the OpenGL interface. We will just look at "2d" graphics.

You can create a context object using the getContext method on the <canvas> DOM element. This object has methods with which you can draw on the <canvas>.

The coordinate system that canvas uses puts (0, 0) at the top-left corner with the positive y-axis going down from there, and the x-axis going up to the right.

A shape can be filled (its area is a certain colour) or stroked (a line is drawn on its edge).

Example:

let cx = document.querySelector("canvas").getContext("2d");
let patternImg = new Image();

// fetch.then

fetch("https://api.github.com/emojis")
.then(data => {
  return data.json();
})
.then(emojiData => {
  patternImg.src=emojiData.smiling_face_with_three_hearts;
  patternImg.onload=function(){
    let pattern = cx.createPattern(patternImg,'repeat');
    cx.strokeStyle = pattern;
    cx.lineWidth = 64;
    cx.beginPath();     // starts a new path
    for (let y = 32; y < 545; y += 128) {
      cx.moveTo(0, y);     // starts a new sub path at the point specified
      cx.lineTo(768, y);     // 
    }
    cx.stroke();
  }
});

Example:

let USpopulation = [];
let canvas = document.querySelector("canvas");
let cx = canvas.getContext("2d");

// fetch.then

fetch('http://api.worldbank.org/v2/countries/USA/indicators/SP.POP.TOTL?per_page=5000&format=json')
.then(data => {
  return data.json();
})
.then(jsonArr => {
    let myArray = jsonArr[1];
    for(let i=1960; i<2021; i++){
      USpopulation.push(myArray[i-1960]);
    }
    return USpopulation;
})
.then(drawRects => {
    for(let i=1960; i<2021; i++){
      let num = i-1960;
      let height = Math.round((USpopulation[num].value)/1000000);
      cx.fillStyle = "red";
      let x = 620-((num*10)+10);
      let y = (350-height)+10;
      let width = 5;
      cx.fillRect(x, y, width, height);
    }
});

Example:

let cx = document.querySelector("canvas").getContext("2d");     // creates a context object on the <canvas> element
let geoDataObj;
let worldMap = document.createElement("img");
worldMap.src = "images/vector-world-map.jpg";
worldMap.style.zIndex = 0;


// fetch.then

fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson')
.then(geoData => {
  // json() method of fetch API request object
  return geoData.json();     // returns a promise that parses JSON data and resolves/returns it as JavaScript Object
})
.then(geoDataObj => {
  let geoArray = geoDataObj.features;
  cx.drawImage(worldMap, 0, 0, 1172, 760);
  cx.translate(552, 465);
  for (let i = 0; i < geoArray.length; i++){
    let magnitude = geoArray[i].properties.mag * 10;
    let x = geoArray[i].geometry.coordinates[0] * 3.26;   // longitude * 3.26 accounts for width of map image and 360 degrees of longitude shown across map width
    let y = -(geoArray[i].geometry.coordinates[1] * 4.22);   // latitude * 4.22 accounts for height of map image and 180 degrees of latitude shown across map height
    let location = geoArray[i].properties.place;
    //console.log(`${location}: latitude = ${x}, longitude = ${y}, magnitude = ${magnitude/10}.`);
    if(x < -552){
      x = x + 1172;   // x = x plus map img width
    }
    cx.beginPath();     // method of Canvas 2D API starts a new path
    cx.arc(x, y, magnitude, 0, 2 * Math.PI);     // arc(x, y, radius, startAngle, endAngle)
    cx.fillStyle = 'rgba(255,255,30,' + 0.5 + ')';
    cx.fill();
    cx.font = "12px Arial";
    cx.fillStyle = "white";
    cx.fillText(location, x+((i+1)*28), y+((i+1)*28));
    cx.beginPath();
    cx.moveTo(x+((i+1)*28), y+((i+1)*28));
    cx.lineTo(x, y);
    cx.strokeStyle = 'rgba(255,255,255,' + 0.5 + ')';
    cx.stroke();
  }
});

Example:

let cx = document.querySelector("canvas").getContext("2d");
let worldMap = document.createElement("img");
worldMap.src = "images/worldMap1.jpg";
worldMap.style.zIndex = 0;
let iSS = document.createElement("img");
iSS.src = "images/iss.png";
iSS.style.zIndex = 10;

// fetch.then

setInterval(function () {
  fetch('http://api.open-notify.org/iss-now.json')
  .then(issData => {
    return issData.json();
  })
  .then(issDataObj => {
    let longitudeX =  issDataObj.iss_position.longitude * 3.3;  // longitude * 3.3 accounts for width of map image and 360 degrees of longitude shown across map width
    let latitudeY =  -(issDataObj.iss_position.latitude * 5.08);   // latitude * 5.08 accounts for height of map image and 150 degrees of latitude shown across map height
    console.log("long = " + longitudeX + " lat = " + latitudeY);
    cx.drawImage(worldMap, 0, 0, 1190, 762);   // last two numbers represent pixel width and height of map image
    //cx.drawImage(worldMap, 0, 0, canvas.width, canvas.height);
    cx.translate(893, 477);   // translates origin to longitude = 0, latitude = 0 on map
    // if longitude is over 297, conditional brings satellite img longitude back to left hand side of map to continue its journey
    if(longitudeX > 297){
      longitudeX =  -(893 - (longitudeX - 297));
    }
    cx.drawImage(iSS, longitudeX - 50, latitudeY - 34, 100, 68);
    cx.resetTransform();
  })
}, 120);

A reference list (incomplete) of canvas methods and properties can be found here: https://www.w3schools.com/tags/ref_canvas.asp.

Mozilla's guide to canvas in the 2D context: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.

References

https://eloquentjavascript.net/17_canvas.html
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2Dhttps://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
https://www.w3schools.com/tags/ref_canvas.asp