Tag Archive for: canvas

Resize HTML5 Canvas without losing drawing

There are multiple ways to resize a canvas without losing its content. One of the easiest way is to save its data.

Freehand Drawing in HTML5 Canvas

We are gonna use PointerEvents that are hardware agnostic (mouse, pen, touch, etc) to draw lines in an HTML Canvas.

Add extra info to samples’ tooltip

Starting from our JSON with an array of samples, we are going to set the names of each sample in its tooltip, respectively.

Create new samples between samples

We are going to use Chartjs to plot our samples (values over time) in a Line Chart but before we are going to double our samples. To create each new sample we take the date (x) of the next element and the value (y) of the previous one.