في HTML5، أُضيف عنصر HTML {{HTMLElement("canvas")}} والذي يمكن استخدامه لرسم الرسوميات ببرمجتها عبر جافاسكربت. فمثلا، يمكن استخدامها لرسم الرسوم البيانية، أو تراكبات الصور، أو إنشاء الحركات أو حتى معالجة الفديوهات آنيا وتصييرها.
حصلت تطبيقات موزيلا على دعم <canvas> بدءًا من إصدارة جيكو رقم ١٫٨ (أي فَيَرفُكس ١٫٥). طُوّر هذا العنصر على يد شركة آبل للوحة أوإس إكس وسفاري. يدعم إنترنت إكسبلورر <canvas> بدءًا من الإصدارة التاسعة فما فوق، بينما الإصدارات الأقدم منه تحتاج سكربتا ليعمل عنصر رقعة الرسم بكفاءة، هذا السكربت هو من مشروع جوجل باسم Explorer Canvas. يدعم جوجل كروم وأوبرا ٩ عتصر <canvas> أيضا.
يُستخدم عنصر <canvas> في تقنية WebGL أيضا لرسم الرسومات ثلاثية الأبعاد على صفحات الوب بتسريع عتادي.
هذه عيّنة مقتطفة من كود يستخدم طريقة {{domxref("CanvasRenderingContext2D.fillRect()")}}.
<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
حرّر الكود أدناه لترى التغييرات تحدث آنيا في رقعة الرسم:
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100);</textarea>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
{{ EmbedLiveSample('Playable_code', 700, 360) }}
الواجهات المتعلقة بِ WebGLRenderingContext مذكورة في مرجع WebGL.
واجهة {{domxref("CanvasCaptureMediaStream")}} لها علاقة أيضا.
<canvas> وأيضا مزاياها المتقدمة.<canvas>.| المواصفة | الحالة | تعليق |
|---|---|---|
| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} |