Databases
StackOverflow2013
Postsdbo
POError reading 'Cannot read property 'x' of undefined' in HTML5 Canvas code
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POError reading 'Cannot read property 'x' of undefined' in HTML5 Canvas code
    primarykey
    data
    text
    <p>I am having a problem with my JavaScript code. Since I made it so that you could delete shapes from the canvas an error is appearing when I try adding additional shapes to the canvas. The error reads: 'Cannot read property 'x' of undefined'. When the error appears, it quotes line 116 of the code, which reads: 'var dx = tmpRingB.x - tmpRing.x;'. I need to make it so this error does not appear. The code is as below.</p> <pre><code>var shapeObj = function (counter, context, canvas, settingsBox) { //Where sound info goes (freq, vol, amp, adsr etc) this.id = "shape"+counter; this.ctx = context; this.canvas = canvas; this.sBox = settingsBox; this.audioProperties = { duration: Math.random()*1-0.1, frequency: Math.random()*44000-220 } this.x = Math.random()*this.ctx.canvas.width; this.y = Math.random()*this.ctx.canvas.height; this.radius = 40; this.vx = Math.random()*6-3; this.vy = Math.random()*6-3; this.draw = function () { this.ctx.beginPath(); this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false); this.ctx.closePath(); this.ctx.stroke(); } this.clickTest = function (e) { var canvasOffset = this.canvas.offset(); var canvasX = Math.floor(e.pageX-canvasOffset.left); var canvasY = Math.floor(e.pageY-canvasOffset.top); var dX = this.x-canvasX; var dY = this.y-canvasY; var distance = Math.sqrt((dX*dX)+(dY*dY)); if (distance &lt;= this.radius) { this.manageClick(); } }; this.manageClick = function(){ alert('this is ' + this.id); this.sBox.populate(this.audioProperties, this); this.radius -= 10; } this.update = function(newProps){ // repopulate the shapes with new settings } } var settingsBox = function (){ this.populate = function(props, obj){ for (a in props){ alert(props[a]); } } } $(document).ready(function() { var canvas = $('#myCanvas'); var ctx = canvas.get(0).getContext("2d"); var canvasWidth = canvas.width(); var canvasHeight = canvas.height(); $(window).resize(resizeCanvas); function resizeCanvas() { canvas.attr("width", $(window).get(0).innerWidth - 2); canvas.attr("height", $(window).get(0).innerHeight - 124); canvasWidth = canvas.width(); canvasHeight = canvas.height(); }; resizeCanvas(); canvas.onselectstart = function () { return false; } ctx.strokeStyle = "rgb(255, 255, 255)"; ctx.lineWidth = 5; var playAnimation = true; $(canvas).click(function(e) { for (i = 0; i &lt; objects.length; i++) { objects[i].clickTest(e); } }); objects = []; sBox = new settingsBox(); for (var i = 0; i &lt; 4; i++) { var ring = new shapeObj(i, ctx, canvas, sBox); objects[i] = ring; objects[i].draw(); } $("#button4").click(function() { var ring = new shapeObj(i, ctx, canvas, sBox); objects[i] = ring; objects[i++].draw(); playSoundA(); }); function animate() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); deadObjects = []; for (var i = 0; i &lt; objects.length; i++) { var tmpRing = objects[i]; for (var j = i+1; j &lt; objects.length; j++) { var tmpRingB = objects[j]; var dx = tmpRingB.x - tmpRing.x; var dy = tmpRingB.y - tmpRing.y; var dist = Math.sqrt((dx * dx) + (dy * dy)); if(dist &lt; tmpRing.radius + tmpRingB.radius) { playSound(); //Put collision animations here!!! var angle = Math.atan2(dy, dx); var sine = Math.sin(angle); var cosine = Math.cos(angle); var x = 0; var y = 0; var xb = dx * cosine + dy * sine; var yb = dy * cosine - dx * sine; var vx = tmpRing.vx * cosine + tmpRing.vy * sine; var vy = tmpRing.vy * cosine - tmpRing.vx * sine; var vxb = tmpRingB.vx * cosine + tmpRingB.vy * sine; var vyb = tmpRingB.vy * cosine - tmpRingB.vx * sine; vx *= -1; vxb *= -1; xb = x + (tmpRing.radius + tmpRingB.radius); tmpRing.x = tmpRing.x + (x * cosine - y * sine); tmpRing.y = tmpRing.y + (y * cosine + x * sine); tmpRingB.x = tmpRing.x + (xb * cosine - yb * sine); tmpRingB.y = tmpRing.y + (yb * cosine + xb * sine); tmpRing.vx = vx * cosine - vy * sine; tmpRing.vy = vy * cosine + vx * sine; tmpRingB.vx = vxb * cosine - vyb * sine; tmpRingB.vy = vyb * cosine + vxb * sine; tmpRing.loop = true; }; }; tmpRing.x += tmpRing.vx; tmpRing.y += tmpRing.vy; if (tmpRing.x - tmpRing.radius &lt; 0) { playSound(); tmpRing.x = tmpRing.radius; tmpRing.vx *= -1; } else if (tmpRing.x + tmpRing.radius &gt; ctx.canvas.width) { playSound(); tmpRing.x = ctx.canvas.width - tmpRing.radius; tmpRing.vx *= -1; }; if (tmpRing.y - tmpRing.radius &lt; 0) { playSound(); tmpRing.y = tmpRing.radius; tmpRing.vy *= -1; } else if (tmpRing.y + tmpRing.radius &gt; ctx.canvas.height) { playSound(); tmpRing.y = ctx.canvas.height - tmpRing.radius; tmpRing.vy *= -1; }; if(tmpRing.radius &lt;= 0) { deadObjects.push(tmpRing); } objects[i].draw(); }; if (deadObjects.length &gt; 0) { for (var d = 0; d &lt; deadObjects.length; d++) { var tmpDeadObject = deadObjects[d]; objects.splice(objects.indexOf(tmpDeadObject), 1); } } if(playAnimation) { setTimeout(animate, 33); }; }; animate(); }); </code></pre> <p>Any ideas?</p> <p>Thanks for the help.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJon_091
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POError reading 'Cannot read property 'x' of undefined' in HTML5 Canvas code
      1. This table or related slice is empty.
      1. VTDownMod
    1. COCode works for me (except `playSound`, which is not defined).
      singulars
      1. POError reading 'Cannot read property 'x' of undefined' in HTML5 Canvas code
      1. USkirilloid
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload