How JavaScript is Executed in Google V8 specially Canvas related code

Question

gurus i am trying to understand the working of Google-V8 engine, I cam across https://developers.google.com/v8/get_started as far as i understand, V8 takes javascript as input, then you compile it and get the output, as in the above example we get out put as string. In real life scenario the case is different consider this canvas code

var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"), // Create canvas context
        W = window.innerWidth, // Window's width
        H = window.innerHeight, // Window's height
        particles = [], // Array containing particles
        ball = {}, // Ball object
        paddles = [2], // Array containing two paddles
        mouse = {}, // Mouse object to store it's current position
        points = 0, // Varialbe to store points
        fps = 60, // Max FPS (frames per second)
        particlesCount = 20, // Number of sparks when ball strikes the paddle
        flag = 0, // Flag variable which is changed on collision
        particlePos = {}, // Object to contain the position of collision 
        multipler = 1, // Varialbe to control the direction of sparks
        startBtn = {}, // Start button object
        restartBtn = {}, // Restart button object
        over = 0, // flag varialbe, cahnged when the game is over
        init, // variable to initialize animation
        paddleHit;

// Add mousemove and mousedown events to the canvas
canvas.addEventListener("mousemove", trackPosition, true);
canvas.addEventListener("mousedown", btnClick, true);

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     ||  
        function( callback ){
            return window.setTimeout(callback, 1000 / 60);
        };
})();

How are these code executed in V8, specially the canvas.addEventListener, can some shred some light and help me understand it.

V8 has very little to do with what happens when you call `canvas.addEventListener`. Chrome's DOM and event layers, on the other hand, have everything to do with it. — T.J. Crowder, Nov 11 '13 at 10:26
what about the rest like document.getElementById("canvas") or window.requestAnimationFrame, Can you point me some documentation — Rohit, Nov 11 '13 at 10:35
People don't even point you to direction, but down vote you -- wow — Rohit, Nov 12 '13 at 06:44
I'm surprised the question was downvoted, but it's just one downvote, just one person. — T.J. Crowder, Nov 12 '13 at 07:53

score 5 · Answer 1 · answered Feb 01 '14 at 11:57

v8 is embeddable JavaScript engine. This engine has nothing to do with Canvas, getElement or any other browser-specific feature. v8 will just callback to a browser code to do something from within your javascript code. The link you mention is a documentation how to get started embedding v8 into your C++ application. So that you could control your own application resources with JavaScript. The resources you can control are yours, either files or graphics or windows or devices and gadgets.

There is another project that combines the power of v8 with HTML rendering engine, this project is called Chromium browser.

How JavaScript is Executed in Google V8 specially Canvas related code

1 Answers1