SimpleCanvasJS(width, height, container, fillColoropt, brushColoropt, brushSizeopt) → {SimpleCanvasJS}

new SimpleCanvasJS(width, height, container, fillColoropt, brushColoropt, brushSizeopt) → {SimpleCanvasJS}
main.js, line 13

Une librairie qui permet de créer un canvas sur lequel dessiner avec la souris ou avec le doigt (sur mobile). Plusieurs instances peuvent cohabiter sur la même page.

Parameters:
Name Type Attributes Default Description
width number

La largeur du canvas en pixels
height number

La hauteur du canvas en pixels
container HTMLElement

Le conteneur dans lequel ajouter le canvas
fillColor string | null <optional>
 null

La couleur de remplissage. La valeur null défini le fond comme transparent
brushColor string <optional>
 #000000

La couleur de la brosse
brushSize number <optional>
 1

La dimension de la brosse
Returns:
SimpleCanvasJS -

La référence au SimpleCanvasJS créé

Version:
  • 1.0.0 (Janvier 2020)
Author:
  • TIMMatane
Example

1) Créer un canvas de 250X250 avec remplissage en blanc, trait en rouge et d'une grosseur de 5 pixels et la placer dans un conteneur

let dessin = new SimpleCanvasJS(250, 250, document.querySelector("#canvasDiv"), "#ffffff", "#ff0000", 5);
dessin.brush("#00ff00", 5); //changer la brosse par défaut
dessin.fill("#ff0000"); //remplir le canvas d'une couleur

Members

canvas :HTMLCanvasElement
main.js, line 49

Référence a l'élément canvas de SimpleCanvasJS

context :CanvasRenderingContext2D
main.js, line 69

Référence au contexte 2D du canvas

fillColor :string|null
main.js, line 81

Couleur hexadecimale de remplissage

Methods

brush(brushColor, brushSize)
main.js, line 128

Change la brosse utilisée

Parameters:
Name Type Description
brushColor string

La couleur de la brosse
brushSize number

La dimension de la brosse

clear(refillopt)
main.js, line 162

Vider la canvas de son contenu

Parameters:
Name Type Attributes Default Description
refill boolean <optional>
 true

Est-ce qu'une couleur de fond doit être utilisée après avoir vidé le canvas?

destroy()
main.js, line 244

Détruit l'instance SimpleCanvasJS créé



Note: Afin de détruire le canvas, la variable de l'instance devrait aussi être nullifiée.

Returns:
-

null

Example

Destruction d'un SimpleCanvasJS associé à une variable

dessin.destroy();
dessin = null //nullifie l'instance

//ou en une seule ligne

dessin = dessin.destroy()

fill(fillColoropt)
main.js, line 146

Remplir l'arrière pland du canvas d'une couleur

Parameters:
Name Type Attributes Default Description
fillColor string <optional>
 this.fillColor

La couleur voulue

save(imageElement, loadCallback) → {string|undefined}
main.js, line 204

Sauvegarde le contenu du canvas

Parameters:
Name Type Description
imageElement HTMLImageElement

L'image devant afficher le contenu sauvegardé (base64)
loadCallback function

La fonction devant être appelée lorsque le chargement de l'image est terminé
Returns:
string | undefined -

Retourne l'image en chaîne de caractère base64 ou undefined si une image est passée en paramètre

Examples

1) Sauvegarde du contenu du canvas et placement dans une image

let dessin = new SimpleCanvasJS(250, 250, document.querySelector("#canvasDiv"), "#ffffff", "#ff0000", 5);
dessin.save(document.querySelector('img'))

2) Sauvegarde du contenu du canvas et placement dans une image avec fonction appelée lorsque tout est chargé

let dessin = new SimpleCanvasJS(250, 250, document.querySelector("#canvasDiv"), "#ffffff", "#ff0000", 5);
dessin.save(document.querySelector('img'), function(){
   console.log("Chargement de l'image complété");
})