HTML canvas Tag

HTML canvas Tag - belajar html canvas , element <canvas> mempunyai definisi sebagai kanvas. element <canvas> digunakan untuk membuat grafik atau bitmap, baik berupa teks, gambar, maupun konten 2 dimensi.

Dalam penerapan pada html, element <canvas> hanya berfungsi sebagai tempat atau media, sedangkan hasil yang ditampilkan dieksekusi oleh javascript.

Contoh 1 html element <canvas> :

<canvas id="canvas" width="250" height="100">
 Maaf browser anda tidak support element canvas
</canvas>

<script>
 var canvas=document.getElementById("canvas");
 var canvasku=canvas.getContext("2d");
 canvasku.font="30px Arial"; 
 canvasku.fillStyle="red";   
 var txt="Trik Sonic"
 canvasku.fillText(txt,10,50);
</script>

Contoh 2 html element <canvas> :

<canvas style="background: #080808;" id="canvas2">
 Maaf browser anda tidak support element canvas
</canvas>

<script>
var c = document.getElementById('canvas2'),
    ctx = c.getContext('2d'),
    cw = 150,
    ch = 150;
c.width = cw;
c.height = ch;
var rand = function(a, b) {
    return ~~((Math.random() * (b - a + 1)) + a);
}
var path = [{
            x: cw / 2,
            y: (ch / 2 - 50)
        },
        {
            x: (cw / 2) - 60,
            y: (ch / 2 + 50)
        },
        {
            x: (cw / 2) + 60,
            y: (ch / 2 + 50)
        }
    ],
    particles = [],
    particleCount = 10,
    particleDelayTick = 7,
    particleDelayTickMax = 7,
    hue = rand(0, 360);
var Particle = function(path, speed) {
    this.path = path;
    this.currentPoint = 0;
    this.x = path[0].x;
    this.y = path[0].y;
    this.speed = speed;
}
var createParticles = function() {
    if (particles.length < particleCount) {
        if (particleDelayTick >= particleDelayTickMax) {
            particles.push(new Particle(path, 3));
            particleDelayTick = 0;
        } else {
            particleDelayTick++;
        }
    }
}
var updateParticles = function() {
    var i = particles.length;
    while (i--) {
        var p = particles[i];
        var onLastPoint = (p.currentPoint === p.path.length - 1);
        var nextPoint = (onLastPoint) ? 0 : p.currentPoint + 1;
        var dx = p.path[nextPoint].x - p.x;
        var dy = p.path[nextPoint].y - p.y;
        var dist = Math.sqrt(dx * dx + dy * dy);
        var vx = dx / dist * p.speed;
        var vy = dy / dist * p.speed;

        if (dist > p.speed) {
            p.x += vx;
            p.y += vy;
        } else {
            p.x = p.path[nextPoint].x;
            p.y = p.path[nextPoint].y;
            p.currentPoint = nextPoint;
        }
    }
}

var renderParticles = function() {
    ctx.fillStyle = 'hsla(' + hue + ',50%,10%,1)';
    ctx.strokeStyle = 'hsla(' + hue + ',50%,10%,1)';
    var i = particles.length;
    while (i--) {
        var p = particles[i];
        var i2 = particles.length;
        while (i2--) {
            var p2 = particles[i2];
            if (i != i2) {
                ctx.beginPath();
                ctx.moveTo(p.x, p.y);
                ctx.lineTo(p2.x, p2.y);
                ctx.lineTo(cw / 2, ch / 2);
                ctx.stroke();
            }
        }
    }
}

var eraseIt = function() {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0, 0, 0, .4)';
    ctx.fillRect(0, 0, cw, ch);
    ctx.globalCompositeOperation = 'lighter';
}
var loopsIDidItAgain = function() {
    eraseIt();
    createParticles();
    updateParticles();
    renderParticles();
    hue = (hue < 360) ? hue + 1 : 0;
}
setInterval(loopsIDidItAgain, 16);
</script>

Attributes :

Atribute html tag <canvas> :

Attribute	Value	Deskripsi
width	pixels	Menentukan lebar dari canvas
height	pixels	Menentukan tinggi dari canvas

Global Attributes:

Element <canvas> mencakup Global Attributes HTML.

Event Attributes:

Element <canvas> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome	Ya
Safari	2
Firefox	1.5
Opera	9
IE	9
Edge	Ya

Mobile

Android Webview	?
Chrome Android	?
Edge Mobile	Ya
Firefox Android	4
Opera Android	-
iOs Safari	1
Samsung Internet	?

Default CSS :

Browser yang support dengan element <canvas>, biasanya mempunyai nilai default :

canvas { 
    height: 150px;
    width: 300px;
}