Develop Reference

JavaScript canvas throws an Error, but works anyway

I am making this background for a page drawing random lines. The lines are being drawn and it looks as it was supposed to but when I look into the console I get about ~10 errors every second. It says it cannot read startX and starY. When I change it to x and why it does not draw the lines anymore.
var sandbox = document.getElementById('sandbox');
ctx = sandbox.getContext('2d');
var referencePoint = function(x, y) {
this.startX = x;
this.startY = y;
};
const progressPoints = [];
for (let i = 0; i < 15; i++) {
let x = Math.floor(Math.random() * sandbox.width);
let y = Math.floor(Math.random() * sandbox.height);
progressPoints.push(new referencePoint(x, y));
};
ctx.strokeStyle= "grey";
ctx.moveTo(progressPoints[0].x, progressPoints[0].y);
It supposedly cannot read those startX and startY:
var counter = 1,
interval = setInterval(function() {
var point = progressPoints[counter];
ctx.lineTo(point.startX, point.startY);
//alert(point.startX, point.startY)
ctx.stroke();
if(counter >= progressPoints.lenght){
clearInterval(interval);
};
counter++
}, 140);
(function() {
var contentBox = $('div.content-box'),
activeContent = contentBox.find('div.active-content'),
pageTransitionOverlay = contentBox.find('div.page-transition-overlay'),
navBtn = $('a.nav-btn'),
hiddenContent = $('div.hidden-content');
navBtn.on('click', function(e) {
var self = $(this),
moveToActive = hiddenContent.find('div.' + self.data('target-class'));
contentBox.addClass('transitionEffect');
pageTransitionOverlay.fadeIn(300, function() {
// Change content
self.closest('div.content-wrapper').appendTo(hiddenContent);
moveToActive.appendTo(activeContent);
// Transition transitionEffect
contentBox.removeClass('transitionEffect');
pageTransitionOverlay.fadeOut(300);
});
e.preventDefault();
});
})();

So it seems that length is too much, try 1 less
if (counter >= progressPoints.length - 1) { ... }
var sandbox = document.getElementById('sandbox');
ctx = sandbox.getContext('2d');
var referencePoint = function(x, y) {
this.startX = x;
this.startY = y;
};
const progressPoints = [];
for (let i = 0; i < 15; i++) {
let x = Math.floor(Math.random() * sandbox.width);
let y = Math.floor(Math.random() * sandbox.height);
progressPoints.push(new referencePoint(x, y));
};
ctx.strokeStyle = "grey";
ctx.moveTo(progressPoints[0].x, progressPoints[0].y);
var counter = 1,
interval = setInterval(function() {
var point = progressPoints[counter];
ctx.lineTo(point.startX, point.startY);
//alert(point.startX, point.startY)
ctx.stroke();
if (counter >= progressPoints.length - 1) {
clearInterval(interval);
};
counter++
}, 140);
(function() {
var contentBox = $('div.content-box'),
activeContent = contentBox.find('div.active-content'),
pageTransitionOverlay = contentBox.find('div.page-transition-overlay'),
navBtn = $('a.nav-btn'),
hiddenContent = $('div.hidden-content');
navBtn.on('click', function(e) {
var self = $(this),
moveToActive = hiddenContent.find('div.' + self.data('target-class'));
contentBox.addClass('transitionEffect');
pageTransitionOverlay.fadeIn(300, function() {
// Change content
self.closest('div.content-wrapper').appendTo(hiddenContent);
moveToActive.appendTo(activeContent);
// Transition transitionEffect
contentBox.removeClass('transitionEffect');
pageTransitionOverlay.fadeOut(300);
});
e.preventDefault();
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<canvas id="sandbox"></canvas>

Need help in displaying selection handles on rectangle using javascript

I am trying to add something to my code so as to select the image after drawing ( the selection handler should appear in the corners and in the middle of edge) and then drag or increase/decrease the height and width?
My sample code is in the fiddle , in this I am drawing a rectangle using the mouse event handlers. I want to select the rectangle and modify/alter it using the selection handlers instead of drawing it again.
Click the button ROI, metrics and then you can draw it using the mouse events.
http://jsfiddle.net/AhdJr/53/
var oImageBuffer = document.createElement('img');
var oCanvas=document.getElementById("SetupImageCanvas");
var o2DContext=oCanvas.getContext("2d");
var oRect = {};
var oROI = {};
var oMetrics ={};
var oLayers = new Array();
var bDragging = false;
var bSetROI = false;
var bSetLayers = false;
InitMouseEvents();
var oSelect = document.getElementById("ImageList");
oSelect.onchange=function() {
changeCanvasImage(oSelect[oSelect.selectedIndex].value);
}
// Canvas event handlers (listeners).
function InitMouseEvents() {
oCanvas.addEventListener('mousedown', MouseDownEvent, false);
oCanvas.addEventListener('mouseup', MouseUpEvent, false);
oCanvas.addEventListener('mousemove', MouseMoveEvent, false);
oCanvas.addEventListener('mouseout', MouseOutEvent, false);
}
function MouseDownEvent(e) {
oRect.startX = e.pageX - this.offsetLeft;
oRect.startY = e.pageY - this.offsetTop;
bDragging = true;
}
function MouseUpEvent() {
bDragging = false;
}
function MouseOutEvent() {
document.getElementById("MouseCoords").innerHTML="";
}
function MouseMoveEvent(e) {
if (bDragging) {
oRect.w = (e.pageX - this.offsetLeft) - oRect.startX;
oRect.h = (e.pageY - this.offsetTop) - oRect.startY;
oCanvas.getContext('2d').clearRect(0,0,oCanvas.width, oCanvas.height);
var oROI = document.getElementById("btnROI");
if (oROI.checked) {
SetROI();
}
var oLayer = document.getElementById("btnLAYER");
if (oLayer.checked) {
SetLayer();
}
var oMetrics = document.getElementById("btnMetrics");
if (oMetrics.checked) {
SetMetrics();
}
}
if (bSetROI) {
DrawROI();
}
if (bSetLayers) {
DrawLayers();
}
if(bSetMetrics){
DrawMetrics();
}
// Display the current mouse coordinates.
ShowCoordinates(e);
}
function ShowCoordinates(e) {
x=e.clientX;
y=e.clientY;
document.getElementById("MouseCoords").innerHTML="(" + x + "," + y + ") " + document.getElementById('txtPatchCount').value;
}
// Interactively draw ROI rectangle(s) on the canvas.
function SetROI() {
bSetROI = true;
oROI.startX = oRect.startX;
oROI.startY = oRect.startY;
oROI.w = oRect.w;
oROI.h = oRect.h;
}
function DrawROI() {
o2DContext.lineWidth=1.5;
o2DContext.strokeStyle = '#0F0';
o2DContext.strokeRect(oROI.startX, oROI.startY, oROI.w, oROI.h);
var iPatches = document.getElementById('txtPatchCount').value;
o2DContext.beginPath();
var iTop = oROI.startY;
var iBottom = oROI.startY + oROI.h;
var iLeft = oROI.startX;
var iX = iLeft;
for (var iPatch=1; iPatch<iPatches; ++iPatch) {
iX = iLeft + iPatch*oROI.w/iPatches;
o2DContext.moveTo(iX, iTop);
o2DContext.lineTo(iX, iBottom);
}
o2DContext.lineWidth=0.25;
o2DContext.stroke();
}
function SetMetrics() {
bSetMetrics = true;
oMetrics.startX = oRect.startX;
oMetrics.startY = oRect.startY;
oMetrics.w = oRect.w;
oMetrics.h = oRect.h;
}
function DrawMetrics(){
o2DContext.strokeStyle = 'black';
o2DContext.strokeRect(oMetrics.startX, oMetrics.startY, oMetrics.w, oMetrics.h);
o2DContext.beginPath();
var iTop = oMetrics.startY;
var iBottom = oMetrics.startY + oMetrics.h;
var iLeft = oMetrics.startX;
var iX = iLeft;
o2DContext.moveTo(iX, iTop);
o2DContext.lineTo(iX, iBottom);
o2DContext.stroke();
}
// Interactively draw layer boundaries on the canvas.
function SetLayer() {
bSetLayers = true;
oLayers.length = 0;
oLayers.push(oRect.startY);
oLayers.push(oRect.startY + oRect.h);
}
function DrawLayers() {
o2DContext.lineWidth=0.25;
o2DContext.strokeStyle = '#F00';
o2DContext.beginPath();
var iY = oLayers[0];
var iLeft = 0;
var iRight = oCanvas.width;
for (var iLayer=0; iLayer<oLayers.length; ++iLayer) {
iY = oLayers[iLayer];
o2DContext.moveTo(iLeft, iY);
o2DContext.lineTo(iRight, iY);
o2DContext.stroke();
}
}
The below blog is doing the same thing but I am not sure how to add this functionality in my code.
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape
Please guide me how to add the same in mine.
Really appreciate the help.

try the following link.
It is doing somewhat you want to achieve.
http://simonsarris.com/blog/225-canvas-selecting-resizing-shape

Bind events to all elements in class instead of just to one id

I developed this interaction / script that scales whatever element is passed to it and if that element is pinched in on, it scales down / less.
This is how the script is initialised ( passing two arguments the container and the item to be scaled / transformed:
$(function(){
var zoom = new collapse('#zoom','#zoom :first');
var zoom2 = new collapse('#zoom2','#zoom2 :first');
var zoom3 = new collapse('#zoom3','#zoom3 :first');
});
It works fine as above on single IDs, but I need it to work on a class.
I tried this:
$(function(){
var zoom = new collapse('#zoom','.polaroid');
});
But that causes the whole script not to work because all the elements in that class are being passed instead of one as with an id.
This would only select the first item in the class so it won't work:
$(function(){
var zoom = new collapse('#zoom','.polaroid :first');
});
How can I change my script so that it is applied to all members of the .polaroid class in the #main container?
Here is my script:
function collapse(container, element){
container = $(container).hammer({
prevent_default: true,
scale_threshold: 0
});
element = $(element);
var displayWidth = container.width();
var displayHeight = container.height();
var MIN_ZOOM = 0;
var MAX_ZOOM = 1;
var scaleFactor = 1;
var previousScaleFactor = 1;
var startX = 0;
var startY = 0;
var translateX = 0;
var translateY = 0;
var previousTranslateX = 0;
var previousTranslateY = 0;
var time = 1;
var tch1 = 0,
tch2 = 0,
tcX = 0,
tcY = 0,
toX = 0,
toY = 0,
cssOrigin = "";
container.bind("transformstart", function(event){
e = event;
tch1 = [e.touches[0].x, e.touches[0].y],
tch2 = [e.touches[1].x, e.touches[1].y];
tcX = (tch1[0]+tch2[0])/2,
tcY = (tch1[1]+tch2[1])/2;
toX = tcX;
toY = tcY;
var left = $(element).offset().left;
var top = $(element).offset().top;
cssOrigin = (-(left) + toX)/scaleFactor +"px "+ (-(top) + toY)/scaleFactor +"px";
});
container.bind("transform", function(event){
scaleFactor = previousScaleFactor * event.scale;
scaleFactor = Math.max(MIN_ZOOM, Math.min(scaleFactor, MAX_ZOOM));
transform(event);
});
container.bind("transformend", function(event){
previousScaleFactor = scaleFactor;
if(scaleFactor > 0.42){
$(element).css('-webkit-transform', 'scaleY(1.0)').css('transform', 'scaleY(1.0)');
}
});
function transform(e){
var cssScale = "scaleY("+ scaleFactor +")";
element.css({
webkitTransform: cssScale,
webkitTransformOrigin: cssOrigin,
transform: cssScale,
transformOrigin: cssOrigin,
});
if(scaleFactor <= 0.42){
$(element).animate({height:0}, function(){
$(this).remove();
});
}
}
}

Wrap it as a jquery plugin:
$.fn.collapse = function(filter) {
return this.each(function(){
collapse(this,filter);
});
}
$("#zoom,#zoom1,#zoom2").collapse(".polaroid");
or if each of the zoom elements had a common class,
$(".zoomel").collapse(".polaroid");

You have to run collapse for each element.
element = $(element);
element.each(function(){
//each element would be this here
var $this= $(this);
//do whatever you want with $this
})

Javascript only works in IE Quirks, 7 and Chrome and Firefox. Doesn't work in IE 8 or 9 Standards

My code makes a number of divisions appear to orbit around an invisible horizontal axis on a plane. How it works: it fires a mouseevent listener onMouseDown, and captures the X of the user's cursor relative to the window. onMouseUp is simulated by a setTimeout function that is called 90 milliseconds later, it does the same and then subtracts the two values to determine the distance and direction to spin.
My question is: Why does it work correctly in FF, Chrome, and IE Quirks and IE 7 Standards, but not IE 8 Standards or IE 9 Standards?
IE8: the model breaks down and the divisons float away outside the containing boundary division. IE9: No response from the JS whatsoever.
The following contains the entire javascript on the page, which can be found # http://electrifiedpulse.com/360.html :
<script type=text/javascript>
var objectCount = 8; var pixel = new Array(); var size = new Array();
var command = "Stop"; var panel = new Array('0','Back','Front','Front','Back','Front','Back','Front','Back');
var quadrant = new Array(); var originalSize = 50;
var WindowWidth = 360; var WindowWidthHalf = WindowWidth/2; var sTime=0; var s1=0; var scrollSpeed;
var myX, myY;
function myMove(evt) {
if (window.event){myX = event.clientX;myY = event.clientY;}
else{myX = evt.clientX;myY = evt.clientY;}
}
document.onmousemove = myMove;
if (!window.event) {document.captureEvents(Event.MOUSEMOVE);}
function iScrollStop(){
sTime = sTime - 10;
document.getElementById('I_CONTROLS').innerHTML = sTime + ", " + scrollSpeed;
if(sTime<=0) command = "Stop";
else setTimeout(function(){iScrollStop()},10);
}
function iScrollPause(){
setTimeout(function(){this.checkPause()},100);
this.checkPause = function(){if(s1>sTime){command="Stop"; sTime=0; s1=0;}}
}
var iInitialX; //var d='Up';
function iScrollListen(d){
if(d=='Down'){ iInitialX = myX; setTimeout(function(){iScrollListen('Up')},90); iScrollPause();
}else if(d=='Up'){
var spinDirection = 'Right';
var iDifference = myX - iInitialX; if(iDifference < 0){ spinDirection = 'Left'; iDifference = Math.abs(iDifference);}
if (command!=spinDirection){sTime=0;s1=0;} var doScroll=0; if(command=='Stop') doScroll=1;
command = spinDirection; s1=sTime; sTime+=(iDifference*15); if(s1<=0)iScrollStop();
if(doScroll==1) iScroll();
}
}
function iScrollControl(c){command = c; if((c=='Left')||(c=='Right')) iScroll();}
function iScroll(){
scrollSpeed=(sTime<=1)? 1 : Math.ceil(sTime/1000);
if(scrollSpeed>=10)scrollSpeed=10;
scrollSpeed = 15 - scrollSpeed;
if(command=='Left') pixelDirection=2;
else if(command=='Right') pixelDirection=(0-2);
pixelDirectionNeg = (0-pixelDirection);
for(i=1;i<=objectCount;i++){
iObj = document.getElementById("iObject" + i);
pixel[i] = iObj.offsetLeft;
if((pixel[i]>=WindowWidthHalf)&&(pixel[i]<=WindowWidth)){
if(panel[i]=="Front") quadrant[i] = 4;
else quadrant[i] = 3;
}
if((pixel[i]>=0)&&(pixel[i]<=WindowWidthHalf)){
if(panel[i]=="Front") quadrant[i] = 1;
else quadrant[i] = 2;
}
if(quadrant[i]==1){
iObj.style.left = pixel[i]-pixelDirection;
size[i] = (pixel[i]-pixelDirection)*(1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirection<=0){quadrant[i]=2; panel[i]='Back';}
if(pixel[i]-pixelDirection>=WindowWidthHalf){quadrant[i]=4; panel[i]='Front';}
}
if(quadrant[i]==2){
iObj.style.left = pixel[i]-pixelDirectionNeg;
size[i] = (pixel[i]-pixelDirectionNeg)*(-1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirectionNeg<=0){quadrant[i]=1; panel[i]='Front';}
if(pixel[i]-pixelDirectionNeg>=WindowWidthHalf){quadrant[i]=3; panel[i]='Back';}
}
if(quadrant[i]==3){
iObj.style.left = pixel[i]-pixelDirectionNeg;
size[i] = (WindowWidth-(pixel[i]-pixelDirectionNeg))*(-1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirectionNeg<=WindowWidthHalf){quadrant[i]=2; panel[i]='Back';}
if(pixel[i]-pixelDirectionNeg>=WindowWidth){quadrant[i]=4; panel[i]='Front';}
}
if(quadrant[i]==4){
iObj.style.left = pixel[i]-pixelDirection;
size[i] = (WindowWidth-(pixel[i]-pixelDirection))*(1/(WindowWidthHalf/(originalSize/2))) + (originalSize/2);
Attribute(iObj,size[i]);
if(pixel[i]-pixelDirection<=WindowWidthHalf){quadrant[i]=1; panel[i]='Front';}
if(pixel[i]-pixelDirection>=WindowWidth){quadrant[i]=3; panel[i]='Back';}
}
}
if((command=='Left')||(command=='Right')) setTimeout(function(){iScroll()},scrollSpeed);
}
function Attribute(iObj,s){
iObj.style.width = s; iObj.style.height = s; iObj.style.top='50%'; iObj.style.marginTop = (0-(s/2))+"px"; iObj.style.zIndex = s;
}
</script>
I don't know what may or may not be relevant to you, so I included the entire script. If you want you could ignore the longest function,
iScroll()

#RyanStortz. Try to register events in this maner:
var isMouseCaptured=false;
function i_boundary_mousedown(ev) {
isMouseCaptured=true;
iScrollListen("Down");
}
function doc_mousemove(ev) {
if(isMouseCaptured) {
ev=ev||event;
myX=ev.clientX;
myY=ev.clientY;
}
}
function doc_mouseup(ev) {
if(isMouseCaptured) {
isMouseCaptured=false;
ev=ev||event;
myX=ev.clientX;
myY=ev.clientY;
}
}
var i_boundaryObj=document.getElementById('I_BOUNDARY');
if(window.addEventListener) {
i_boundaryObj.addEventListener('mousedown',i_boundary_mousedown,false);
document.addEventListener('mousemove',doc_mousemove,false);
document.addEventListener('mouseup',doc_mouseup,false)
}
else if(window.attachEvent) {
i_boundaryObj.attachEvent('onmousedown',i_boundary_mousedown)
document.attachEvent('onmousemove',doc_mousemove);
document.attachEvent('onmouseup',doc_mouseup)
}
else ;//
Add for DIV with class "I_BOUNDARY" id attribute "I_BOUNDARY" and remove onmousedown attribute.

WebKit Uncaught Error: INVALID_STATE_ERR: DOM Exception 11

I have this code and in Firefox is working well, but in Chrome I'am getting this error:
"Uncaught Error: INVALID_STATE_ERR: DOM Exception 11" at sprites.js:36
on that line is this code:
context.drawImage(
Context is a global variable in which contains 2d context of canvas. Here is full code:
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="sprites.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="prototypes.js"></script>
<script type="text/javascript" src="initialize.js"></script>
</head>
<body onload="initialize()">
</body>
</html>
sprites.js
function SpritePrototype(frames, width, height, type)
{
this.frames = frames;
this.type = type;
if (this.frames > 0) {
this.frameArray = new Array(this.frames);
for (var i = 0; i < this.frames; i++) {
this.frameArray[i] = document.createElement("canvas");
}
}
}
function Sprite()
{
this.id = 0;
this.prototype = 0;
this.next = 0;
this.prev = 0;
this.x = 0;
this.y = 0;
this.startFrame = 0;
this.currentFrame = 0;
}
Sprite.prototype.draw = function()
{
if (this.prototype == 0) {
return;
}
if (context.drawImage) {
if (this.prototype.frames > 0) {
context.drawImage(
this.prototype.frameArray[this.currentFrame],
Math.round(this.x),
Math.round(this.y)
);
}
}
}
game.js
function Game()
{
this.frameLength = 1000/30;
this.startTime = 0;
this.sprites = 0;
}
Game.prototype.resetTime = function()
{
var d = new Date();
this.startTime = d.getTime();
delete d;
}
Game.prototype.addSprite = function(prototype)
{
currentId++;
if (this.sprites == 0) { // if creating the first sprite
this.sprites = new Sprite();
this.sprites.id = currentId;
this.sprites.prototype = prototype;
} else {
var tempSprite = this.sprites; // temporarily store the first sprite
while (tempSprite.next != 0) { // while not the last sprite
tempSprite = tempSprite.next; // shift to next one
}
tempSprite.next = new Sprite(); // next sprite to the last sprite
tempSprite.next.id = currentId;
tempSprite.next.prototype = prototype;
tempSprite.next.next = 0; // the last sprite, or the last one in the space
tempSprite.next.prev = tempSprite;
}
}
Game.prototype.loop = function()
{
var tempSprite;
var currentTime;
var globalFrame;
var oldFrame;
var d = new Date();
currentTime = d.getTime();
delete d;
globalFrame = Math.floor((currentTime - this.startTime)/this.frameLength);
canvas.width = canvas.width;
tempSprite = this.sprites;
while (tempSprite != 0) {
if (tempSprite.frames > 0) {
oldFrame = tempSprite.currentFrame;
tempSprite.currentFrame = globalFrame;
}
tempSprite.draw();
tempSprite = tempSprite.next;
}
}
prototypes.js
var protoPlayer;
function createPrototypes()
{
var tempCtx;
var i;
protoPlayer = new SpritePrototype(5, 20, 30, "player");
for (i = 0; i < protoPlayer.frames; i++) {
protoPlayer.frameArray[i].width = protoPlayer.width;
protoPlayer.frameArray[i].height = protoPlayer.height;
tempCtx = protoPlayer.frameArray[i].getContext("2d");
tempCtx.strokeStyle = "rgb("+ i * 50 +", 0, 0)";
tempCtx.beginPath();
tempCtx.moveTo(0, 0);
tempCtx.lineTo(20, 30);
tempCtx.stroke();
}
}
initialize.js
var game;
var canvas;
var context;
var currentId;
function initialize()
{
canvas = document.createElement("canvas");
canvas.width = 640;
canvas.height = 480;
canvas.setAttribute("style", "background:#060606;");
document.body.appendChild(canvas);
context = canvas.getContext("2d");
createPrototypes();
currentId = 0;
game = new Game();
game.addSprite(protoPlayer);
game.loop();
}

Seems to me that that error is happening because you are calling drawImage with a HTMLCanvasObject who's height or width is zero. From the latest canvas 2d context spec:
If the image argument is an
HTMLCanvasElement object with either a
horizontal dimension or a vertical
dimension equal to zero, then the
implementation must raise an
INVALID_STATE_ERR exception.
http://dev.w3.org/html5/2dcontext/#images
Hope this helps.

Some time this error also occurred when we try to do document.getElemetnById('xx').innerHtml='htmlcode'; in this time 'htmlcode' should be proper formatted mean should use proper closing tags.