How JavaScript is Executed in Google V8 specially Canvas related code

gurus i am trying to understand the working of Google-V8 engine, I cam across 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

// 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 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.

Need Your Help