יצירת ועיבוד תמונות וגרפיקה עם Canvas

אלמנט <canvas> מאפשר לצייר גרפיקה דו-ממדית בדפדפן באמצעות JavaScript.

יצירת Canvas

ציור קווים וצורות

    // ציור קו
    ctx.beginPath();
    ctx.moveTo(150, 50);
    ctx.lineTo(200, 100);
    ctx.stroke();

    // ציור עיגול
    ctx.beginPath();
    ctx.arc(300, 75, 50, 0, 2 * Math.PI);
    ctx.stroke();
    

הוספת תמונה ל-Canvas

    let img = new Image();
    img.onload = function() {
      ctx.drawImage(img, 10, 10);
    };
    img.src = 'path/to/image.jpg';