Tag Archive for: canvas

Resize HTML5 Canvas without losing drawing

/in , /by

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

/in , , /by

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

/in , /by

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

/in , /by

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.