---
title: Tuval Arabirimi
slug: Web/API/Tuval_Arabirimi
tags:
  - Arabirim
  - Canvas
  - Genel Bakış
  - JavaScript
  - Kaynak
  - Tuval
translation_of: Web/API/Canvas_API
---
<div>{{CanvasSidebar}}</div>

<p class="summary"><span class="seoSummary">Tuval anlamına gelen canvas, <a href="/en-US/docs/HTML/HTML5">HTML5</a> de eklenmiştir, <strong>{{HTMLElement("canvas")}} adlı HTML ögesi </strong>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. </span></p>

<p>Mozilla uygulamaları Gecko 1.8 (bkz. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) ile birlikte <code>&lt;canvas&gt;</code> 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 <code>&lt;canvas&gt;</code> desteklemeye başlamıştır; önceki sürümleri için Google'ın geliştirdiği <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> tasarısı <code>&lt;canvas&gt;</code> 'ın etkin kullanımına olanak tanıyordu. Google Chrome ve Opera 9'un da <code>&lt;canvas&gt;</code> desteği vardır.</p>

<p><a href="/en-US/docs/Web/WebGL">WebGL</a> de donanım tarafından hızlandırılmış 3 Boyutlu <a href="/tr/docs/Web/Guide/Çizgeler">Web Çizgeleri </a>çizmek için <code>&lt;canvas&gt;</code> ögesini kullanır. </p>

<h2 id="Örnek">Örnek</h2>

<p> {{domxref("CanvasRenderingContext2D.fillRect()")}} yöntemini kullanan ufak bir kod parçacığı:</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;canvas id="tuval"&gt;&lt;/canvas&gt;
</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">var tuval = document.getElementById('tuval');
var bağlam = tuval.getContext('2d');

bağlam.fillStyle = 'green';
bağlam.fillRect(10, 10, 100, 100);
</pre>

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

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;canvas id="tuval" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
&lt;div class="playable-buttons"&gt;
  &lt;input id="düzenle" type="button" value="Düzenle" /&gt;
  &lt;input id="sıfırla" type="button" value="Sıfırla" /&gt;
&lt;/div&gt;
&lt;textarea id="code" class="playable-code"&gt;
bağlam.fillStyle = 'green';
bağlam.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
</pre>

<pre class="brush: js">var tuval = document.getElementById('tuval');
var bağlam = tuval.getContext("2d");
var kodAlanı = document.getElementById('code');
var sıfırla = document.getElementById('sıfırla');
var düzenle = document.getElementById('düzenle');
var kod = kodAlanı.value;

function TuvaleÇiz() {
  bağlam.clearRect(0, 0, tuval.width, tuval.height);
  eval(kodAlanı.value);
}

sıfırla.addEventListener('click', function() {
  kodAlanı.value = kod;
  TuvaleÇiz();
});

düzenle.addEventListener('click', function() {
  kodAlanı.focus();
})

kodAlanı.addEventListener('input', TuvaleÇiz);
window.addEventListener('load', TuvaleÇiz);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>

<h2 id="Atıflar">Atıflar</h2>

<div class="index">
<ul>
 <li>{{domxref("HTMLCanvasElement")}}</li>
 <li>{{domxref("CanvasRenderingContext2D")}}</li>
 <li>{{domxref("CanvasGradient")}}</li>
 <li>{{domxref("CanvasImageSource")}}</li>
 <li>{{domxref("CanvasPattern")}}</li>
 <li>{{domxref("ImageBitmap")}}</li>
 <li>{{domxref("ImageData")}}</li>
 <li>{{domxref("RenderingContext")}}</li>
 <li>{{domxref("TextMetrics")}}</li>
 <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
 <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
</ul>
</div>

<p><code>WebGLRenderingContext</code> ile ilgili atıflar <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> altında verilmiştir.</p>

<p>{{domxref("CanvasCaptureMediaStream")}} de ilgilidir.</p>

<h2 id="Kılavuz_ve_yönergeler">Kılavuz ve yönergeler</h2>

<dl>
 <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas kılavuzu</a></dt>
 <dd><code>&lt;canvas&gt;</code> ın hem temel hem de gelişmiş özelliklerini anlatan kapsayıcı bir kılavuz.</dd>
 <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Kod Parçacıkları: Canvas</a></dt>
 <dd><code>&lt;canvas&gt;</code> ile ilgili yazılmış kod parçacıkları...</dd>
 <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Gösteri: Yalın ışıklandırma</a></dt>
 <dd>Tuval kullanarak geliştirilmiş 3B ortamda görüş alanına göre ışıklandırma...</dd>
 <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Tuval üzerine DOM ögeleri çizmek</a></dt>
 <dd>Belgede bulunan DOM ögeleri tuval üzerine çizimi.</dd>
 <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">canvas kullanarak görüntü işleme</a></dt>
 <dd>{{HTMLElement("video")}} ve {{HTMLElement("canvas")}} ögelerini kullanarak izletideki görüntüyü canlı olarak işleme/değiştirme</dd>
</dl>

<h2 id="Kaynaklar">Kaynaklar</h2>

<h3 id="Kapsamlı">Kapsamlı</h3>

<ul>
 <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Tuvaline Derinlemesine Dalmak</a></li>
 <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas(Tuval) El Kitabı </a></li>
</ul>

<h3 id="Kütüphaneler">Kütüphaneler</h3>

<ul>
 <li><a href="http://fabricjs.com">Fabric.js</a> SVG işleme yeteneklerine iye, açık kaynaklı bir kütüphane.</li>
 <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> masaüstü ve taşınabilir uygulamalardaki etkileşime odaklanmış açık kaynaklı tuval kütüphanesi.</li>
 <li><a href="http://paperjs.org/">Paper.js</a> vektör çizgeleri için HTML5 tuvalin üzerinde çalışan betikleme çatısı.</li>
 <li><a href="http://origamijs.com/docs/">Origami.js</a> hafif açık kaynaklı tuval kütüphanesi.</li>
 <li><a href="http://libcanvas.github.com/">libCanvas</a> güçlü ve hafif, açık kaynaklı tuval çatısı.</li>
 <li><a href="https://p5js.org/">p5.js </a>sanatçılar, eğitimciler ve yeni başlayanlar için çizim işlevselliği sunan tam donatılmış tuval kütüphanesi.</li>
 <li><a href="http://processingjs.org">Processing.js</a> Processing görselleştime dilinin JS kütüphanesi.</li>
 <li><a href="https://playcanvas.com/">PlayCanvas</a> açık kaynaklı oyun motoru.</li>
 <li><a href="http://www.pixijs.com/">Pixi.js</a> açık kaynaklı oyun motoru.</li>
 <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> çizge kütüphanesi.</li>
 <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> tuval için canlandırma arabirimi.</li>
 <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> veri görselleştirme, yaratıcı kodlama ve oyun geliştirme için WebGL çatısı.</li>
 <li><a href="http://thejit.org/">JavaScript InfoVis Araçkiti</a> Web için etkileşimli 2 boyutlu veri görselleştirmeleri yaratır.</li>
 <li><a href="http://www.createjs.com/easeljs">EaselJS</a> oyun ve sanat için, tuval kullanımını kolaylaştıran açık kaynaklı/özgür kütüphanedir</li>
 <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> 2 boyutlu çizgeler oluşturmak, değiştirmek için tasarlanmış, açık kaynaklı bir başka kütüphanedir.</li>
 <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> açık kaynaklı, tuval üzerinde ısı haritaları oluşturmaya olanak tanıyan bir kütüphane.</li>
 <li><a href="http://zimjs.com">ZIM</a> ç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.</li>
</ul>

<h2 id="Tanımlamalar">Tanımlamalar</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Tanım</th>
   <th scope="col">Durum</th>
   <th scope="col">Yorum</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Ayrıca_bkz.">Ayrıca bkz.</h2>

<ul>
 <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
</ul>