Develop Reference

context.clearRect() doesn't work as expected

So I have a maze here and the problem arises when user changes rowNum/colNum in the maze.
When user changes either of them, it calls
ctx.clearRect(0, 0, canvas.width, canvas.height).
This clears up the whole canvas but when user again starts moving the player, the player from previously cleared up canvas appears up in the this canvas. see here.
clearRect() clears up the canvas but I don't know why the player is still left there to interact with.
codesandbox link
Here's a shortened description of what my code does to draw the player-
main.js
let customGrid = document.querySelector("#rows,#columns");
customGrid.forEach(elem => elem.addEventListener("change", e => {
// detect changed element
if (e.target.id === "row")
customGrid[0].value = parseInt(e.target.value);
else
customGrid[1].value = parseInt(e.target.value);
ctx.clearRect(0, 0, canvas.width, canvas.width);
// setting myMaze to new instance of Maze
myMaze = new Maze(ctx, 600, customGrid[0].value, customGrid[1].value);
myMaze.setup();
myMaze.drawMap();
})
);
Next, myMaze.drawMap() contains-
//set player
this.player = new Player(this.ctx, this.goal, this.cellWidth, this.cellHeight);
this.player.setPlayer(this);
From here setPlayer calls-
setPlayer(myMaze) {
....
this.drawPlayer();
this.listenMoves(myMaze);
}
listenMoves(myMaze) {
window.addEventListener("keydown", function handler(e) {
myMaze.player.move(e.keyCode, myMaze);
let reachedCol = myMaze.player.colNum === myMaze.goal.colNum ? true : false;
let reachedRow = myMaze.player.rowNum === myMaze.goal.rowNum ? true : false;
if (reachedRow && reachedCol) {
alert("reached!");
window.removeEventListener("keydown", handler);
}
});
}
move(input, myMaze) {
let current = myMaze.grid[this.rowNum][this.colNum];
let walls = current.walls;
switch(input) {
case 37:
if(!walls.leftWall) {
this.colNum -= 1;
} break;
case 38:
if(!walls.topWall) {
this.rowNum -= 1;
} break;
case 39:
if(!walls.rightWall) {
this.colNum += 1;
} break;
case 40:
if(!walls.bottomWall) {
this.rowNum += 1;
}
}
this.ctx.clearRect(current.xCord, current.yCord, current.width, current.height);
current.drawCell();
this.drawPlayer();
}

I would move the event listener up to main.js. Since Maze has the reference to Player, it should be possible. I am assuming you have a global variable of Maze (myMaze).
let myMaze;
let reched = false;
window.addEventListener("keydown", function handler(e) {
if (!myMaze || reched) {
return;
}
myMaze.player.move(e.keyCode, myMaze);
myMaze.player.handleMove();
let reachedCol = myMaze.player.colNum === myMaze.goal.colNum ? true : false;
let reachedRow = myMaze.player.rowNum === myMaze.goal.rowNum ? true : false;
if (reachedRow && reachedCol) {
alert("reached!");
reched = true;
}
});
If you want to keep the event handler as Player's method, you could do something like below. And call unListenMoves() when the grid size changes.
class Player {
constructor(ctx, goal, cellWidth, cellHeight, myMaze) {
// keep the Maze instance as a Player's prop for the later use
this.myMaze = myMaze;
// we need to bind this here, not in listenMoves
this.handleMove = this.handleMove.bind(this);
}
listenMoves() {
window.addEventListener("keydown", this.handleMove);
}
unListenMoves() {
window.removeEventListener("keydown", this.handleMove);
}
handleMove(e) {
const myMaze = this.myMaze;
myMaze.player.move(e.keyCode, myMaze);
let reachedCol = myMaze.player.colNum === myMaze.goal.colNum ? true : false;
let reachedRow = myMaze.player.rowNum === myMaze.goal.rowNum ? true : false;
if (reachedRow && reachedCol) {
alert("reached!");
window.removeEventListener("keydown", this.handleMove);
}
}
}

Canvas touch event js

hi guys I need some help with my canvas, I try differeent ways to make it work in mobile devices but I can't.
I try to launch the methodes that I create to start and stop the click events. But I think is not the rigth way.
class Canvas {
constructor(emplacement, btnEffacer, btnCroix) {
//btn pour effacer et afficher
this.btnCroix = document.querySelector(".fermeture")
this.btnEffacer = document.querySelector(btnEffacer);
// emplacement du canvas
this.canvas = document.querySelector(emplacement);
this.cont = this.canvas.getContext("2d");
//quelques variables
this.signer = false;
this.vide = true
this.canvas.width = 190;
this.canvas.height = 120;
this.cont.lineWidth = 2;
this.cont.strokeStyle = "#000";
//les evenements
//comencer a dessigner
this.canvas.addEventListener("touchstart", this.touchstart.bind(this), false);
this.canvas.addEventListener("touchmove", this.touchmove.bind(this), false);
this.canvas.addEventListener("touchend", this.touchend.bind(this), false);
this.canvas.addEventListener("mousedown", this.demarrer.bind(this));
//arreter de dessigner
this.canvas.addEventListener("mouseup", this.arreter.bind(this));
//le trece du dessin
this.canvas.addEventListener("mousemove", this.dessiner.bind(this));
//effacer le dessin
this.btnCroix.addEventListener("click", this.effacer.bind(this));
this.btnEffacer.addEventListener("click", this.effacer.bind(this));
}
//les methodes
touchstart(e) {
e.preventDefault()
const touche = e.touches[0]
this.demarrer(e)
}
touchmove(e) {
e.preventDefault()
const touche = e.touches[0]
this.dessiner(e)
}
touchend(e) {
e.preventDefault()
this.arreter(e)
}
demarrer(e) {
this.signer = true;
this.vide = false
this.dessiner(e);
}
arreter(e) {
this.signer = false;
this.cont.beginPath();
}
dessiner(e) {
if (!this.signer) return;
this.cont.lineTo(e.offsetX, e.offsetY);
this.cont.stroke();
this.cont.beginPath();
this.cont.moveTo(e.offsetX, e.offsetY);
}
effacer() {
this.cont.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.vide = true
}
If you can explain me how it works and help me with the code, it will be great.
thanks for your help

It seems like you may be the keyword 'on' before your touch events.
The following three lines in your code:
this.canvas.addEventListener("touchstart", this.touchstart.bind(this), false);
this.canvas.addEventListener("touchmove", this.touchmove.bind(this), false);
this.canvas.addEventListener("touchend", this.touchend.bind(this), false);
Should actually be:
this.canvas.addEventListener("ontouchstart", this.touchstart.bind(this), false);
this.canvas.addEventListener("ontouchmove", this.touchmove.bind(this), false);
this.canvas.addEventListener("ontouchend", this.touchend.bind(this), false);
https://www.w3schools.com/jsref/obj_touchevent.asp

This page has a canvas you can draw on with your finger or mouse:
<!doctype html>
<html><head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head><body>
<canvas id='thecanvas' width='700' height='1000' style='touch-action:none;border:1px solid #cccccc;'></canvas>
<script>
let canvas = document.getElementById('thecanvas');
function canvas_read_mouse(canvas, e) {
let canvasRect = canvas.getBoundingClientRect();
canvas.tc_x1 = canvas.tc_x2;
canvas.tc_y1 = canvas.tc_y2;
canvas.tc_x2 = e.clientX - canvasRect.left;
canvas.tc_y2 = e.clientY - canvasRect.top;
}
function on_canvas_mouse_down(e) {
canvas_read_mouse(canvas, e);
canvas.tc_md = true;
}
function on_canvas_mouse_up(e) {
canvas.tc_md = false;
}
function on_canvas_mouse_move(e) {
canvas_read_mouse(canvas, e);
if (canvas.tc_md && (canvas.tc_x1 !== canvas.tc_x2 || canvas.tc_y1 !== canvas.tc_y2)) {
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(canvas.tc_x1, canvas.tc_y1);
ctx.lineTo(canvas.tc_x2, canvas.tc_y2);
ctx.stroke();
}
}
function canvas_read_touch(canvas, e) {
let canvasRect = canvas.getBoundingClientRect();
let touch = event.touches[0];
canvas.tc_x1 = canvas.tc_x2;
canvas.tc_y1 = canvas.tc_y2;
canvas.tc_x2 = touch.pageX - document.documentElement.scrollLeft - canvasRect.left;
canvas.tc_y2 = touch.pageY - document.documentElement.scrollTop - canvasRect.top;
}
function on_canvas_touch_start(e) {
canvas_read_touch(canvas, e);
canvas.tc_md = true;
}
function on_canvas_touch_end(e) {
canvas.tc_md = false;
}
function on_canvas_touch_move(e) {
canvas_read_touch(canvas, e);
if (canvas.tc_md && (canvas.tc_x1 !== canvas.tc_x2 || canvas.tc_y1 !== canvas.tc_y2)) {
//alert(`${canvas.tc_x1} ${canvas.tc_y1} ${canvas.tc_x2} ${canvas.tc_y2}`);
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(canvas.tc_x1, canvas.tc_y1);
ctx.lineTo(canvas.tc_x2, canvas.tc_y2);
ctx.stroke();
}
}
canvas.addEventListener('mousedown', (e) => { on_canvas_mouse_down(e) }, false);
canvas.addEventListener('mouseup', (e) => { on_canvas_mouse_up(e) }, false);
canvas.addEventListener('mousemove', (e) => { on_canvas_mouse_move(e) }, false);
canvas.addEventListener('touchstart', (e) => { on_canvas_touch_start(e) }, false);
canvas.addEventListener('touchend', (e) => { on_canvas_touch_end(e) }, false);
canvas.addEventListener('touchmove', (e) => { on_canvas_touch_move(e) }, false);
</script>
</body></html>

Copy Paste in 2 Different Canvas

My Code works for 1 canvas. But I need this implementation to work for 2 of canvas.
So I tried
var SIGNATURE_2 = new CLIPBOARD_CLASS("signatureCanvas2", true);
The problem is that this always pastes the image in the first canvas, I just need to press Ctrl+V.
How do I paste ONLY when the canvas is focused or hovered?
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Copy paste Image to Canvas
////////////////////////////////////////////////////////////////////////////////////////////////////////////
var SIGNATURE = new CLIPBOARD_CLASS("signatureCanvas", true);
var SIGNATURE_2 = new CLIPBOARD_CLASS("signatureCanvas2", true);
/**
* image pasting into canvas
*
* #param {string} canvas_id - canvas id
* #param {boolean} autoresize - if canvas will be resized
*/
function CLIPBOARD_CLASS(canvas_id, autoresize) {
var _self = this;
var canvas = document.getElementById(canvas_id);
var ctx = document.getElementById(canvas_id).getContext("2d");
var ctrl_pressed = false;
var command_pressed = false;
var paste_event_support;
var pasteCatcher;
//handlers
document.addEventListener('keydown', function (e) {
_self.on_keyboard_action(e);
}, false); //firefox fix
document.addEventListener('keyup', function (e) {
_self.on_keyboardup_action(e);
}, false); //firefox fix
document.addEventListener('paste', function (e) {
_self.paste_auto(e);
}, false); //official paste handler
//constructor - we ignore security checks here
this.init = function () {
pasteCatcher = document.createElement("div");
pasteCatcher.setAttribute("id", "paste_ff");
pasteCatcher.setAttribute("contenteditable", "");
pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;width:10px;margin-left:-20px;';
document.body.appendChild(pasteCatcher);
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (paste_event_support === true || ctrl_pressed == false || mutation.type != 'childList'){
//we already got data in paste_auto()
return true;
}
//if paste handle failed - capture pasted object manually
if(mutation.addedNodes.length == 1) {
if (mutation.addedNodes[0].src != undefined) {
//image
_self.paste_createImage(mutation.addedNodes[0].src);
}
//register cleanup after some time.
setTimeout(function () {
pasteCatcher.innerHTML = '';
}, 20);
}
});
});
var target = document.getElementById('paste_ff');
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);
}();
//default paste action
this.paste_auto = function (e) {
paste_event_support = false;
if(pasteCatcher != undefined){
pasteCatcher.innerHTML = '';
}
if (e.clipboardData) {
var items = e.clipboardData.items;
if (items) {
paste_event_support = true;
//access data directly
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) {
//image
var blob = items[i].getAsFile();
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);
this.paste_createImage(source);
}
}
e.preventDefault();
}
else {
//wait for DOMSubtreeModified event
}
}
};
//on keyboard press
this.on_keyboard_action = function (event) {
var k = event.keyCode;
//ctrl
if (k == 17 || event.metaKey || event.ctrlKey) {
if (ctrl_pressed == false)
ctrl_pressed = true;
}
//v
if (k == 86) {
if (document.activeElement != undefined && document.activeElement.type == 'text') {
//let user paste into some input
return false;
}
if (ctrl_pressed == true && pasteCatcher != undefined){
pasteCatcher.focus();
}
}
};
//on kaybord release
this.on_keyboardup_action = function (event) {
//ctrl
if (event.ctrlKey == false && ctrl_pressed == true) {
ctrl_pressed = false;
}
//command
else if(event.metaKey == false && command_pressed == true){
command_pressed = false;
ctrl_pressed = false;
}
};
//draw pasted image to canvas
this.paste_createImage = function (source) {
var pastedImage = new Image();
pastedImage.onload = function () {
if(autoresize == true){
//resize
canvas.width = pastedImage.width;
canvas.height = pastedImage.height;
}
else{
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
ctx.drawImage(pastedImage, 0, 0);
};
pastedImage.src = source;
};
}
.signatureCanvas {
border:1px solid #027C8C;
width: 100%;
max-height:200px;
}
<canvas id="signatureCanvas" class="signatureCanvas"></canvas>
<canvas id="signatureCanvas2" class="signatureCanvas"></canvas>
PS: Please just open snipping tool on windows and copy paste an image to test

Detect if mouse is over canvas, and store it in a variable.
var over_canvas=false;
document.getElementById("signatureCanvas").addEventListener("mouseover", function (i) {
over_canvas=true;
});
document.getElementById("signatureCanvas").addEventListener("mouseout", function (i) {
over_canvas=false;
});
When pasting, check if mouse is over canvas by changing your paste function to:
document.addEventListener('paste', function (e) {
if (over_canvas){
_self.paste_auto(e);
}
}, false);

html canvas Drawing tool and highlight function

I am a javascript function to copy paste an image from the clipboard to HTML canvas, futher i also have a function to let the user draw(highlight) on the image pasted on the canvas. However, the drawing tool function seems to override the copy paste function as it is anonymous. I need help to make these two functions operate.
this is my function to copy from clipboard.
function CLIPBOARD_CLASS(canvas_id, autoresize) {
alert("BLAH");
var _self = this;
var canvas = document.getElementById(canvas_id);
var ctx = document.getElementById(canvas_id).getContext("2d");
var ctrl_pressed = false;
var reading_dom = false;
var text_top = 15;
var pasteCatcher;
var paste_mode;
//handlers
document.addEventListener('keydown', function (e) {
_self.on_keyboard_action(e);
}, false); //firefox fix
document.addEventListener('keyup', function (e) {
_self.on_keyboardup_action(e);
}, false); //firefox fix
document.addEventListener('paste', function (e) {
_self.paste_auto(e);
}, false); //official paste handler
//constructor - prepare
this.init = function () {
//if using auto
if (window.Clipboard)
return true;
pasteCatcher = document.createElement("div");
pasteCatcher.setAttribute("id", "paste_ff");
pasteCatcher.setAttribute("contenteditable", "");
pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;';
pasteCatcher.style.marginLeft = "-20px";
pasteCatcher.style.width = "10px";
document.body.appendChild(pasteCatcher);
document.getElementById('paste_ff').addEventListener('DOMSubtreeModified', function () {
if (paste_mode == 'auto' || ctrl_pressed == false)
return true;
//if paste handle failed - capture pasted object manually
if (pasteCatcher.children.length == 1) {
if (pasteCatcher.firstElementChild.src != undefined) {
//image
_self.paste_createImage(pasteCatcher.firstElementChild.src);
}
}
//register cleanup after some time.
setTimeout(function () {
pasteCatcher.innerHTML = '';
}, 20);
}, false);
}();
//default paste action
this.paste_auto = function (e) {
paste_mode = '';
pasteCatcher.innerHTML = '';
var plain_text_used = false;
if (e.clipboardData) {
var items = e.clipboardData.items;
if (items) {
paste_mode = 'auto';
//access data directly
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) {
//image
var blob = items[i].getAsFile();
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);
this.paste_createImage(source);
}
}
e.preventDefault();
}
else {
//wait for DOMSubtreeModified event
//https://bugzilla.mozilla.org/show_bug.cgi?id=891247
}
}
};
//on keyboard press -
this.on_keyboard_action = function (event) {
k = event.keyCode;
//ctrl
if (k == 17 || event.metaKey || event.ctrlKey) {
if (ctrl_pressed == false)
ctrl_pressed = true;
}
//c
if (k == 86) {
if (document.activeElement != undefined && document.activeElement.type == 'text') {
//let user paste into some input
return false;
}
if (ctrl_pressed == true && !window.Clipboard)
pasteCatcher.focus();
}
};
//on kaybord release
this.on_keyboardup_action = function (event) {
k = event.keyCode;
//ctrl
if (k == 17 || event.metaKey || event.ctrlKey || event.key == 'Meta')
ctrl_pressed = false;
};
//draw image
this.paste_createImage = function (source) {
var pastedImage = new Image();
pastedImage.onload = function () {
if (autoresize == true) {
//resize canvas
canvas.width = pastedImage.width;
canvas.height = pastedImage.height;
}
else {
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
ctx.drawImage(pastedImage, 0, 0);
};
pastedImage.src = source;
};
}
This my drawing tool function
if (window.addEventListener) {
window.addEventListener('load', function () {
var canvas, context, canvaso, contexto;
// The active tool instance.
var tool;
var tool_default = 'line';
function init() {
// Find the canvas element.
canvaso = document.getElementById('my_canvas_1');
if (!canvaso) {
alert('Error: I cannot find the canvas element!');
return;
}
if (!canvaso.getContext) {
alert('Error: no canvas.getContext!');
return;
}
// Get the 2D canvas context.
contexto = canvaso.getContext('2d');
if (!contexto) {
alert('Error: failed to getContext!');
return;
}
// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
if (!canvas) {
alert('Error: I cannot create a new canvas element!');
return;
}
canvas.id = 'imageTemp';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);
context = canvas.getContext('2d');
// Get the tool select input.
var tool_select = document.getElementById('dtool');
if (!tool_select) {
alert('Error: failed to get the dtool element!');
return;
}
tool_select.addEventListener('change', ev_tool_change, false);
// Activate the default tool.
if (tools[tool_default]) {
tool = new tools[tool_default]();
tool_select.value = tool_default;
}
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
// The event handler for any changes made to the tool selector.
function ev_tool_change(ev) {
if (tools[this.value]) {
tool = new tools[this.value]();
}
}
// This function draws the #imageTemp canvas on top of #my_cavas_1, after which
// #imageTemp is cleared. This function is called each time when the user
// completes a drawing operation.
function img_update() {
contexto.drawImage(canvas, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
}
// This object holds the implementation of each drawing tool.
var tools = {};
// The drawing pencil.
tools.pencil = function () {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
// The rectangle tool.
tools.rect = function () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function (ev) {
if (!tool.started) {
return;
}
var x = Math.min(ev._x, tool.x0),
y = Math.min(ev._y, tool.y0),
w = Math.abs(ev._x - tool.x0),
h = Math.abs(ev._y - tool.y0);
context.clearRect(0, 0, canvas.width, canvas.height);
if (!w || !h) {
return;
}
context.strokeRect(x, y, w, h);
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
// The line tool.
tools.line = function () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function (ev) {
if (!tool.started) {
return;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(tool.x0, tool.y0);
context.lineTo(ev._x, ev._y);
context.stroke();
context.closePath();
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
init();
}, false);
}
This is my HTML CANVAS TAG
<canvas id="my_canvas_1" width="300" height="300" onclick="CLIPBOARD_CLASS('my_canvas_1',true);"></canvas>

Javascript - Object not a collection

i try to create an video object with activex but i take this error : "Object not a collection". This is my code and error begins on line "this.parts = null;". There may be other things which causes error before this line. I search on the Net about this error but there is no example to solve it.
function detailKeyPress(evt) {
var evtobj=window.event? event : evt;
switch (evtobj.keyCode) {
case KEYS.OK:
if (player.isFullScreen == false)
player.makeFullScreen();
else
player.makeWindowed();
break;
case KEYS.PLAY:
player.isPlaying = true;
player.object.play(1);
break;
case KEYS.PAUSE:
player.pause();
break;
case KEYS.STOP:
player.makeWindowed();
player.stop();
break;
}
}
function Player(id) {
this.id = id;
this.object = document.getElementById(id);
this.isFullScreen = false;
this.isPlaying = false;
this.parts = null;
return this;
}
Player.prototype.play = function () {
this.isPlaying = true;
return this.object.play(1);
}
Player.prototype.playByUrl = function (url) {
this.object.data = url;
return this.play();
}
document.onkeydown = function (evt) {
detailKeyPress(evt);
}
window.onload = function () {
player = new Player('playerObject');
player.playByUrl($mp4Link);
}
Player.prototype.makeFullScreen = function () {
try {
this.object.setFullScreen(true);
this.isFullScreen = true;
}
catch (ex) {//If philips
this.object.fullScreen = true;
this.isFullScreen = true;
}
}
Player.prototype.makeWindowed = function () {
try {
this.object.setFullScreen(false);
this.isFullScreen = false;
}
catch (ex) { //If philips
this.object.fullScreen = false;
this.isFullScreen = false;
}
}
Player.prototype.pause = function () {
this.isPlaying = false;
this.object.play(0);
}
Player.prototype.stop = function () {
this.isPlaying = false;
this.object.stop();
}

This may caused by your registry. If you clean it, you can solve or probably a bug. I have searched also a lot about this error. There is no another thing to say.