Les couleurs ctx.fillStyle = «insérerLaCouleurEnAnglais»; ctx.strokeStyle = «insérerLaCouleurEnAnglais»;
Les dégradé //Il faut stocker le dégradé dans une variable Dégradé Linéaire: var degrade= ctx.createLinearGradient(x0,y0,x1,y1); degrade.addColorStop(0,’black’); degrade.addColorStop(1,’white’); Dégradé Radial: var degrade= ctx.createRadialLinear(x0,y0,radius0,x1,y1,radius1); degrade.addColorStop(0,’black’); degrade.addColorStop(1,’white’);
Les ombrages Couleur de l’ombre: ctx.shadowColor =«insérerLaCouleurEnAnglais»; Flou de l’ombre: ctx.shadowBlur =20; Déplacement de l’ombre en x: ctx.shadowOffsetX = 20; Déplacement de l’ombre en y: ctx.shadowOffsetY = 20;
Les quadrilatères Rectangle/Carré rempli: fillRect(x,y, largeur, hauteur) Rectangle/Carré contours: strokeRect(x,y, largeur, hauteur) Rectangle/Carré gomme: clearRect(x,y, largeur, hauteur)
Le texte Changer la typo : ctx.font(‘bold 48px serif’) Texte rempli : fillText(«le_texte», x, y, [Optionel]largeurMax) Texte contour : strokeText(«le_texte», x, y, [Optionel]largeurMax)
Les chemins/tracés Epaisseur: ctx.lineWidth = 1; Type de ligne: ctx.lineCap = «round»; (square, butt) Jointure des lignes : ctx.lineJoin = «round»; Remplir une forme : ctx.fill() Tracer les contours d’une forme : ctx.stroke() Creuser une forme, pour voir le dessous : ctx.clip() Tracé de points : ctx.moveTo(x,y); ctx.lineTo(x,y); ctx.quadraticCurveTo(cpx,cpy,x,y); ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); ctx.arcTo(x1,y1,x2,y2,radius); ctx.arc(x,y,radius,startAngle,endAngle, booléen/anticlockwise); ctx.rect(x,y,w,h);
Les images ctx.drawImage(Object image, dx, dy, dw, dh); Filtres Canvas Opacité: ctx.globalAlpha = «1»;
Les modes/effets : ctx.globalCompositeOperation = «source-over»; (source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, copy, xor)
Les transformations ctx.scale(largeurDeLétirement, hauteurDeLétirement); ctx.rotate(angleEnDegrés * Math.PI/180); ctx.translate(x,y); ????? ctx.transform(); ????? ctx.setTransform();
Liste de toutes les fonctions disponibles sur https://simon.html5.org/dump/html5-canvas-cheat-sheet.html