Tuval anlamına gelen canvas, HTML5 de eklenmiştir, <canvas> adlı HTML ögesi JavaScript betikleriyle birlikte, çizge çizmek için kullanılabilir. Örneğin görsel işleyebilir, görselleri canlandırabilir, gerçek zamanlı izleti bile işleyebilirsiniz. 

Mozilla uygulamaları Gecko 1.8 (bkz. Firefox 1.5) ile birlikte <canvas> desteği kazanmıştır. Öge, asıl olarak Apple tarafından OSX  gösterge yüzeyinde ve Safari'de kullanılmıştır. Internet Explorer ise 9. sürümden sonra <canvas> desteklemeye başlamıştır; önceki sürümleri için Google'ın geliştirdiği Explorer Canvas tasarısı <canvas> 'ın etkin kullanımına olanak tanıyordu. Google Chrome ve Opera 9'un da <canvas> desteği vardır.

WebGL de donanım tarafından hızlandırılmış 3 Boyutlu Web Çizgeleri çizmek için <canvas> ögesini kullanır. 

Örnek

 CanvasRenderingContext2D.fillRect() yöntemini kullanan ufak bir kod parçacığı:

HTML

<canvas id="tuval"></canvas>

JavaScript

var tuval = document.getElementById('tuval');
var bağlam = tuval.getContext('2d');

bağlam.fillStyle = 'green';
bağlam.fillRect(10, 10, 100, 100);

Aşağıdaki kodla oynayın ve tuvaldeki değişimleri canlı olarak görün.

Atıflar

WebGLRenderingContext ile ilgili atıflar WebGL altında verilmiştir.

CanvasCaptureMediaStream de ilgilidir.

Kılavuz ve yönergeler

Canvas kılavuzu
<canvas> ın hem temel hem de gelişmiş özelliklerini anlatan kapsayıcı bir kılavuz.
Kod Parçacıkları: Canvas
<canvas> ile ilgili yazılmış kod parçacıkları...
Gösteri: Yalın ışıklandırma
Tuval kullanarak geliştirilmiş 3B ortamda görüş alanına göre ışıklandırma...
Tuval üzerine DOM ögeleri çizmek
Belgede bulunan DOM ögeleri tuval üzerine çizimi.
canvas kullanarak görüntü işleme
<video> ve <canvas> ögelerini kullanarak izletideki görüntüyü canlı olarak işleme/değiştirme

Kaynaklar

Kapsamlı

Kütüphaneler

  • Fabric.js SVG işleme yeteneklerine iye, açık kaynaklı bir kütüphane.
  • Kinetic.js masaüstü ve taşınabilir uygulamalardaki etkileşime odaklanmış açık kaynaklı tuval kütüphanesi.
  • Paper.js vektör çizgeleri için HTML5 tuvalin üzerinde çalışan betikleme çatısı.
  • Origami.js hafif açık kaynaklı tuval kütüphanesi.
  • libCanvas güçlü ve hafif, açık kaynaklı tuval çatısı.
  • p5.js sanatçılar, eğitimciler ve yeni başlayanlar için çizim işlevselliği sunan tam donatılmış tuval kütüphanesi.
  • Processing.js Processing görselleştime dilinin JS kütüphanesi.
  • PlayCanvas açık kaynaklı oyun motoru.
  • Pixi.js açık kaynaklı oyun motoru.
  • PlotKit çizge kütüphanesi.
  • Rekapi tuval için canlandırma arabirimi.
  • PhiloGL veri görselleştirme, yaratıcı kodlama ve oyun geliştirme için WebGL çatısı.
  • JavaScript InfoVis Araçkiti Web için etkileşimli 2 boyutlu veri görselleştirmeleri yaratır.
  • EaselJS oyun ve sanat için, tuval kullanımını kolaylaştıran açık kaynaklı/özgür kütüphanedir
  • Scrawl-canvas 2 boyutlu çizgeler oluşturmak, değiştirmek için tasarlanmış, açık kaynaklı bir başka kütüphanedir.
  • heatmap.js açık kaynaklı, tuval üzerinde ısı haritaları oluşturmaya olanak tanıyan bir kütüphane.
  • ZIM çatısı, tuval üzerinde yaratıcı kodlama için kolaylıklar, bileşenler ve denetim sunar. Erişilebilirlik ve yüzlerce renkli kılavuz da bunların içindedir.

Tanımlamalar

Tanım Durum Yorum
HTML Living Standard
The definition of '<canvas>' in that specification.
Living Standard  

Ayrıca bkz.

Document Tags and Contributors

Contributors to this page: alpr
Last updated by: alpr,