We Keep Coding

Trying to add colour gradient to Canvas Text - javascript

I am trying to add a colour gradient to the canvas text in this code but nothing I've tried works.
I am new to this so am having difficulties finding the solution.
Is this effect even possible? I have found the code to change the text colour using
ctx.fillStyle = gradient;
but it doesn't seem to be working. I'm not even sure where to insert it.
Does anyone know how to achieve this?
window.onresize = function() {
resize();
return true;
};
var pixels = []
var canv = $('canv')
var ctx = canv.getContext('2d')
var wordCanv = $('wordCanv')
var wordCtx = wordCanv.getContext('2d')
var mx = -1
var my = -1
var words = ''
var txt = []
var cw = 0
var ch = 0
var resolution = 1
var n = 0
var timerRunning = false
var resHalfFloor = 0
var resHalfCeil = 0
var width = 600
var height = 600
function canv_mousemove(evt) {
mx = evt.clientX - canv.offsetLeft
my = evt.clientY - canv.offsetTop
}
function Pixel(homeX, homeY) {
this.homeX = homeX
this.homeY = homeY
this.x = Math.random() * cw
this.y = Math.random() * ch
this.xVelocity = Math.random() * 10 - 5
this.yVelocity = Math.random() * 10 - 5
}
Pixel.prototype.move = function() {
var homeDX = this.homeX - this.x
var homeDY = this.homeY - this.y
var homeDistance = Math.sqrt(Math.pow(homeDX, 2) + Math.pow(homeDY, 2))
var homeForce = homeDistance * 0.01
var homeAngle = Math.atan2(homeDY, homeDX)
var cursorForce = 0
var cursorAngle = 0
if (mx >= 0) {
var cursorDX = this.x - mx
var cursorDY = this.y - my
var cursorDistanceSquared = Math.pow(cursorDX, 2) + Math.pow(cursorDY, 2)
cursorForce = Math.min(10000 / cursorDistanceSquared, 10000)
cursorAngle = Math.atan2(cursorDY, cursorDX)
} else {
cursorForce = 0
cursorAngle = 0
}
this.xVelocity +=
homeForce * Math.cos(homeAngle) + cursorForce * Math.cos(cursorAngle)
this.yVelocity +=
homeForce * Math.sin(homeAngle) + cursorForce * Math.sin(cursorAngle)
this.xVelocity *= 0.92
this.yVelocity *= 0.92
this.x += this.xVelocity
this.y += this.yVelocity
}
function $(id) {
return document.getElementById(id)
}
function timer() {
if (!timerRunning) {
timerRunning = true
setTimeout(timer, 33)
for (var i = 0; i < pixels.length; i++) {
pixels[i].move()
}
drawPixels()
n++
if (
n % 10 == 0 &&
(cw != width || ch != height)
)
body_resize()
timerRunning = false
} else {
setTimeout(timer, 5)
}
}
function drawPixels() {
var imageData = ctx.createImageData(cw, ch)
var actualData = imageData.data
var index
var goodX
var goodY
var realX
var realY
for (var i = 0; i < pixels.length; i++) {
goodX = Math.floor(pixels[i].x)
goodY = Math.floor(pixels[i].y)
for (
realX = goodX - resHalfFloor; realX <= goodX + resHalfCeil && realX >= 0 && realX < cw; realX++
) {
for (
realY = goodY - resHalfFloor; realY <= goodY + resHalfCeil && realY >= 0 && realY < ch; realY++
) {
index = (realY * imageData.width + realX) * 4
actualData[index + 3] = 255
}
}
}
imageData.data = actualData
ctx.putImageData(imageData, 0, 0)
}
function readWords() {
var randomWords = ['Text goes here', 'Text 2 goe ']
words = item = randomWords[Math.floor(Math.random() * randomWords.length)]
txt = words.split('\n')
}
function init() {
readWords()
var fontSize = 100
var wordWidth = 0
do {
wordWidth = 0
fontSize -= 5
wordCtx.font = fontSize + 'px sans-serif'
for (var i = 0; i < txt.length; i++) {
var w = wordCtx.measureText(txt[i]).width
if (w > wordWidth) wordWidth = w
}
} while (wordWidth > cw - 50 || fontSize * txt.length > ch - 50)
wordCtx.clearRect(0, 0, cw, ch)
wordCtx.textAlign = 'center'
wordCtx.textBaseline = 'middle'
for (var i = 0; i < txt.length; i++) {
wordCtx.fillText(
txt[i],
cw / 2,
ch / 2 - fontSize * (txt.length / 2 - (i + 0.5))
)
}
var index = 0
var imageData = wordCtx.getImageData(0, 0, cw, ch)
for (var x = 0; x < imageData.width; x += resolution) {
for (var y = 0; y < imageData.height; y += resolution) {
i = (y * imageData.width + x) * 4
if (imageData.data[i + 3] > 128) {
if (index >= pixels.length) {
pixels[index] = new Pixel(x, y)
} else {
pixels[index].homeX = x
pixels[index].homeY = y
}
index++
}
}
}
pixels.splice(index, pixels.length - index)
}
function body_resize() {
cw = width
ch = height
canv.width = cw
canv.height = ch
wordCanv.width = cw
wordCanv.height = ch
init()
}
resHalfFloor = Math.floor(resolution / 2)
resHalfCeil = Math.ceil(resolution / 2)
body_resize()
timer()
setInterval(init, 3000)
<canvas id="wordCanv" width="100%" height="600px" style="border:10px solid rgb(255,255,255);display:none;">
</canvas>
<canvas id="canv" onmousemove="canv_mousemove(event);" onmouseout="mx=-1;my=-1;" width="100%" height="600px">
</canvas>

It is not clear what kind of gradient effect you want to achieve...
So I guess that any will get you moving, see code below
I just added this:
actualData[index + 1] = realX % 255
in your function drawPixels
Play with those values until you get the desired combination
I'm assuming you are familiar with ImageData if not read more here:
https://developer.mozilla.org/en-US/docs/Web/API/ImageData
https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data
var pixels = []
var canv = $('canv')
var ctx = canv.getContext('2d')
var wordCanv = $('wordCanv')
var wordCtx = wordCanv.getContext('2d')
var mx = -1
var my = -1
var words = ''
var txt = []
var cw = 0
var ch = 0
var resolution = 1
var n = 0
var timerRunning = false
var resHalfFloor = 0
var resHalfCeil = 0
var width = 560
var height = 200
function canv_mousemove(evt) {
mx = evt.clientX - canv.offsetLeft
my = evt.clientY - canv.offsetTop
}
function Pixel(homeX, homeY) {
this.homeX = homeX
this.homeY = homeY
this.x = Math.random() * cw
this.y = Math.random() * ch
this.xVelocity = Math.random() * 10 - 5
this.yVelocity = Math.random() * 10 - 5
}
Pixel.prototype.move = function() {
var homeDX = this.homeX - this.x
var homeDY = this.homeY - this.y
var homeDistance = Math.sqrt(Math.pow(homeDX, 2) + Math.pow(homeDY, 2))
var homeForce = homeDistance * 0.01
var homeAngle = Math.atan2(homeDY, homeDX)
var cursorForce = 0
var cursorAngle = 0
if (mx >= 0) {
var cursorDX = this.x - mx
var cursorDY = this.y - my
var cursorDistanceSquared = Math.pow(cursorDX, 2) + Math.pow(cursorDY, 2)
cursorForce = Math.min(10000 / cursorDistanceSquared, 10000)
cursorAngle = Math.atan2(cursorDY, cursorDX)
} else {
cursorForce = 0
cursorAngle = 0
}
this.xVelocity +=
homeForce * Math.cos(homeAngle) + cursorForce * Math.cos(cursorAngle)
this.yVelocity +=
homeForce * Math.sin(homeAngle) + cursorForce * Math.sin(cursorAngle)
this.xVelocity *= 0.92
this.yVelocity *= 0.92
this.x += this.xVelocity
this.y += this.yVelocity
}
function $(id) {
return document.getElementById(id)
}
function timer() {
if (!timerRunning) {
timerRunning = true
setTimeout(timer, 33)
for (var i = 0; i < pixels.length; i++) {
pixels[i].move()
}
drawPixels()
n++
if (
n % 10 == 0 &&
(cw != width || ch != height)
)
body_resize()
timerRunning = false
} else {
setTimeout(timer, 5)
}
}
function drawPixels() {
var imageData = ctx.createImageData(cw, ch)
var actualData = imageData.data
var index
var goodX
var goodY
var realX
var realY
for (var i = 0; i < pixels.length; i++) {
goodX = Math.floor(pixels[i].x)
goodY = Math.floor(pixels[i].y)
for (
realX = goodX - resHalfFloor; realX <= goodX + resHalfCeil && realX >= 0 && realX < cw; realX++
) {
for (
realY = goodY - resHalfFloor; realY <= goodY + resHalfCeil && realY >= 0 && realY < ch; realY++
) {
index = (realY * imageData.width + realX) * 4
actualData[index + 1] = realX % 255
actualData[index + 3] = 255
}
}
}
imageData.data = actualData
ctx.putImageData(imageData, 0, 0)
}
function readWords() {
var randomWords = ['Text 4 foo ', 'Text 2 goe ']
words = item = randomWords[Math.floor(Math.random() * randomWords.length)]
txt = words.split('\n')
}
function init() {
readWords()
var fontSize = 80
var wordWidth = 0
wordCtx.font = fontSize + 'px sans-serif'
do {
wordWidth = 0
fontSize -= 10
for (var i = 0; i < txt.length; i++) {
var w = wordCtx.measureText(txt[i]).width
if (w > wordWidth) wordWidth = w
}
} while (wordWidth > cw - 50 || fontSize * txt.length > ch - 50)
wordCtx.clearRect(0, 0, cw, ch)
wordCtx.textAlign = 'center'
wordCtx.textBaseline = 'middle'
for (var i = 0; i < txt.length; i++) {
wordCtx.fillText(
txt[i],
cw / 2,
ch / 2 - fontSize * (txt.length / 2 - (i + 0.5))
)
}
var index = 0
var imageData = wordCtx.getImageData(0, 0, cw, ch)
for (var x = 0; x < imageData.width; x += resolution) {
for (var y = 0; y < imageData.height; y += resolution) {
i = (y * imageData.width + x) * 4
if (imageData.data[i + 3] > 128) {
if (index >= pixels.length) {
pixels[index] = new Pixel(x, y)
} else {
pixels[index].homeX = x
pixels[index].homeY = y
}
index++
}
}
}
pixels.splice(index, pixels.length - index)
}
function body_resize() {
cw = width
ch = height
canv.width = cw
canv.height = ch
wordCanv.width = cw
wordCanv.height = ch
init()
}
resHalfFloor = Math.floor(resolution / 2)
resHalfCeil = Math.ceil(resolution / 2)
body_resize()
timer()
setInterval(init, 3000)
<canvas id="wordCanv" width="100%" height="200px" style="display:none;">
</canvas>
<canvas id="canv" width="100%" height="200px">
</canvas>

Related

My raycaster's sprites keep blinking, and I think it has to do with ZBuffer.
Using this for reference: https://lodev.org/cgtutor/index.html
I have done plenty of research and can't find any JS raycasters that answer my problem. By sprites, I mean billboarded images, and when you move they blink like an atari game that is being pushed to its limits.
Here is the project on JSFiddle: https://jsfiddle.net/Vakore/bsvx1m26/
Here is where I am using ZBuffer:
for (var stripe = drawStartX; stripe < drawEndX; stripe++) {
var texX =
floor((256 * (stripe - (-spriteWidth / 2 + spriteScreenX)) * texWidth) / spriteWidth) / 256;
// the conditions in the if are:
// 1) it's in front of camera plane so you don't see things behind you
// 2) it's on the screen (left)
// 3) it's on the screen (right)
// 4) ZBuffer, with perpendicular distance
var ruffer = 0;
if (sprite[i][2] == "barrel") {
ruffer = 576 - 64;
}
if (sprite[i][2] == "pillar") {
ruffer = 576;
}
if (sprite[i][2] == "greenlight") {
ruffer = 576 + 64;
}
if (
transformY > 0 &&
stripe > 0 &&
stripe < w &&
transformY < ZBuffer[stripe]
) {
can.drawImage(
document.getElementById(sprite[i][2]),
texX + ruffer, 0, 1, texHeight, stripe, drawStartY, 1, drawEndY - drawStartY
);
}
}
ZBuffer was declared and assigned an array value earlier in the code.
var keys = {
"a": false,
"s": false,
"d": false,
"A": false,
"S": false,
"D": false,
"W": false,
"Z": false,
"X": false,
"C": false,
"ENTER": false
};
document.addEventListener("keydown", function(e) {
e.preventDefault();
if (e.keyCode === 16)
keys["SHIFT"] = true;
if (e.keyCode === 37)
keys["a"] = true;
if (e.keyCode === 39)
keys["d"] = true;
if (e.keyCode === 65)
keys["A"] = true;
if (e.keyCode === 68)
keys["D"] = true;
if (e.keyCode === 83)
keys["S"] = true;
if (e.keyCode === 87)
keys["W"] = true;
if (e.keyCode === 40)
keys["S"] = true;
if (e.keyCode === 38)
keys["W"] = true;
if (e.keyCode === 67)
keys["C"] = true;
if (e.keyCode === 88)
keys["X"] = true;
if (e.keyCode === 90)
keys["Z"] = true;
if (e.keyCode === 13)
keys["ENTER"] = true;
})
document.addEventListener("keyup", function(e) {
e.preventDefault();
if (e.keyCode === 16)
keys["SHIFT"] = false;
if (e.keyCode === 37)
keys["a"] = false;
if (e.keyCode === 39)
keys["d"] = false;
if (e.keyCode === 65)
keys["A"] = false;
if (e.keyCode === 68)
keys["D"] = false;
if (e.keyCode === 83)
keys["S"] = false;
if (e.keyCode === 87)
keys["W"] = false;
if (e.keyCode === 40)
keys["S"] = false;
if (e.keyCode === 38)
keys["W"] = false;
if (e.keyCode === 67)
keys["C"] = false;
if (e.keyCode === 88)
keys["X"] = false;
if (e.keyCode === 90)
keys["Z"] = false;
})
/*
Basic functions(ease of access)
*/
var canvas = document.getElementById("canva");
var can = canvas.getContext("2d");
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
canvas.onclick = function() {
canvas.requestPointerLock();
clicked = true;
};
var mouseX = 0;
var mouseMove = function(e) {
mouseX += e.movementX;
};
var rect = function(x, y, w, h) {
can.fillRect(x, y, w, h);
};
var arc = function(x, y, r, start, stop) {
can.beginPath();
can.arc(x, y, r, start, stop);
can.fill();
};
var circle = function(x, y, r) {
arc(x, y, r, 0, 360);
};
var fill = function(r, g, b, a) {
if (a === undefined) {
a = 1;
}
can.fillStyle = "rgb(" + r + "," + g + "," + b + "," + a + ")";
};
var font = function(siz) {
can.font = siz;
};
var textAlign = function(ali) {
can.textAlign = ali;
};
var text = function(txt, x, y, w, h) {
can.fillText(txt, x, y, w, h);
};
var quad = function(x1, y1, x2, y2, x3, y3, x4, y4) {
can.beginPath();
can.moveTo(x1, y1);
can.lineTo(x2, y2);
can.lineTo(x3, y3);
can.lineTo(x4, y4);
can.closePath();
can.fill();
};
var random = function(min, max) {
return round(Math.random() * (max - min)) + min;
};
var translate = function(x, y) {
can.save();
can.translate(x, y);
};
var scale = function(w, h) {
can.scale(w, h);
}
var trestore = function() {
can.restore();
};
var floor = function(num) {
return Math.floor(num);
};
var sqrt = function(num) {
return Math.sqrt(num);
};
var abs = function(num) {
return Math.abs(num);
};
var color = function(r, g, b, a) {
return [r, g, b, a];
};
var dist = function() {
return true;
};
var cos = function(num) {
return Math.cos(num);
}
var sin = function(num) {
return Math.sin(num);
}
var dist = function(x1, y1, x2, y2) {
dx = x1 - x2;
dy = y1 - y2;
return Math.sqrt(dx * dx + dy * dy);
};
//Begin the raycaster
var scaler = 3; //This reduces the resolution so that it can display large rooms without lagging
var w = 640 / scaler;
var h = 480 / scaler;
var texWidth = 64;
var texHeight = 64;
var rotSpeed = 0.1;
var moveSpeed = 0.1;
var worldMap = [
"1111111111111111111111111111111111111111",
"1001000001234567800000000000000000000001",
"1001000000000000000000000000000000000001",
"1000000000000000000000000000000000000001",
"1001000000000000000000000000000000000001",
"1001000000000000000000000000222200000001",
"1001000000000000000000000000200200000001",
"1111000000000000000000000000200200000001",
"1000000000000000000000000033300333000001",
"8008000000000000000000000000000000000001",
"8000800000000000000000000033300333000001",
"8000080000000000000000000000300300000001",
"8000008000000000000000000000333300000001",
"8888888000000000000000000000000000000001",
"1000000000000000000000000000000000000001",
"1000000000000000000000000000000000000001",
"1000000000000000000000000000000000000001",
"1000000000000000000000000000000000000001",
"1000000000000000000000000000000000000001",
"1666006660000000000000000000000000000001",
"1000000060000000000000000000000000000001",
"1000000060000000000000000000000000000001",
"1000000060000000000000000000000000000001",
"1000000060000000000000000000000000000001",
"1666666660000000000000000000000000000001",
"1000000000000000000000000000000000000001",
"1000000000000000000000000000000000000001",
"1000000000000000000000000000000000000001",
"1000000040444444444444400000000000000001",
"1000000040000000000000400000000000000001",
"1000000040000000000000400000000000000001",
"1000000040000000000000400000000000000001",
"1000000044444444444444400000000000000001",
"1000000000000000000000000000000000000001",
"1000000000000007775777000000000000000001",
"1000000000000007000007000000000000000001",
"1000000000000005000005000000000000000001",
"1000000000000007000007000000000000000001",
"1000000000000000000007000000000000000001",
"1111111111111117775777111111111111111111",
];
try {
var ZBuffer = [];
var sprite = [
[5, 5, "barrel", 0], //Y and X are reversed
[6.5, 2.5, "pillar", 1],
[6.5, 1.5, "pillar", 1.5],
[8, 6, "greenlight", 2],
];
var posX = 2,
posY = 2,
dirX = -1,
dirY = 0,
planeX = 0,
planeY = 0.66; //The 2d raycaster version of the camera plane
} catch (e) {
alert(e);
}
var castRays = function() {
for (var x = 0; x < w; x++) {
var cameraX = 2 * x / (w) - 1; //x-coordinate in camera space
var rayDirX = dirX + planeX * cameraX;
var rayDirY = dirY + planeY * cameraX;
//which box of the map we're in
var mapX = floor(posX);
var mapY = floor(posY);
//length of ray from current position to next x or y-side
var sideDistX;
var sideDistY;
//length of ray from one x or y-side to next x or y-side
var deltaDistX = sqrt(1 + (rayDirY * rayDirY) / (rayDirX * rayDirX));
var deltaDistY = sqrt(1 + (rayDirX * rayDirX) / (rayDirY * rayDirY));
var perpWallDist = 0;
//what direction to step in x or y-direction (either +1 or -1)
var stepX = 0;
var stepY = 0;
var hit = 0; //was there a wall hit?
var side = 0; //was a NS or a EW wall hit?
//calculate step and initial sideDist
if (rayDirX < 0) {
stepX = -1;
sideDistX = (posX - mapX) * deltaDistX;
} else {
stepX = 1;
sideDistX = (mapX + 1.0 - posX) * deltaDistX;
}
if (rayDirY < 0) {
stepY = -1;
sideDistY = (posY - mapY) * deltaDistY;
} else {
stepY = 1;
sideDistY = (mapY + 1.0 - posY) * deltaDistY;
}
while (hit == 0) {
//jump to next map square, OR in x-direction, OR in y-direction
if (sideDistX < sideDistY) {
sideDistX += deltaDistX;
mapX += stepX;
side = 0;
} else {
sideDistY += deltaDistY;
mapY += stepY;
side = 1;
}
//Check if ray has hit a wall
if (worldMap[mapX][mapY] == 0) {}
if (worldMap[mapX][mapY] != 0) {
hit = 1;
}
} //end of while loop
//Calculate distance of perpendicular ray (Euclidean distance will give fisheye effect!)
if (side == 0) {
perpWallDist = (mapX - posX + (1 - stepX) / 2) / rayDirX;
} else {
perpWallDist = (mapY - posY + (1 - stepY) / 2) / rayDirY;
}
//Calculate height of line to draw on screen
var lineHeight = abs(floor(h / perpWallDist));
//calculate lowest and highest pixel to fill in current stripe
var drawStart = -lineHeight / 2 + h / 2;
//if(drawStart < 0) {drawStart = 0;}
var drawEnd = lineHeight / 2 + h / 2;
//if(drawEnd >= h) {drawEnd = h - 1;}
//texturing calculations
//var texNum = worldMap[mapX][mapY] - 1; //1 subtracted from it so that texture 0 can be used!
//calculate value of wallX
var wallX = 0; //where exactly the wall was hit
if (side == 0) {
wallX = posY + perpWallDist * rayDirY;
} else {
wallX = posX + perpWallDist * rayDirX;
}
wallX -= floor((wallX));
//x coordinate on the texture
var texX = floor(wallX * (texWidth));
if (side == 0 && rayDirX > 0) {
texX = texWidth - texX - 1;
}
if (side == 1 && rayDirY < 0) {
texX = texWidth - texX - 1;
}
//Untextured variant
/*var currentColor = color(255, 255, 255);
if (worldMap[mapX][mapY] == "1") {currentColor = color(150, 150, 150);}
if (worldMap[mapX][mapY] == "2") {currentColor = color(255, 255, 255);}
if (worldMap[mapX][mapY] == "3") {currentColor = color(255,0,0);}
if (worldMap[mapX][mapY] == "4") {currentColor = color(0,0,255);}
if (worldMap[mapX][mapY] == "5") {currentColor = color(0,255,0);}
if (worldMap[mapX][mapY] == "6") {currentColor = color(255,0,255);}
if (worldMap[mapX][mapY]=="7") {currentColor = color(0,255,255);}
if (side === 1) {currentColor = [currentColor[0] - 40, currentColor[1] - 40, currentColor[2] - 40];}
//if (dist(mapX, mapY, px, pz) > 10) {continue;}
fill(currentColor[0],currentColor[1],currentColor[2]);
rect(x, drawStart, 1, drawEnd - drawStart);*/
var currentImg = "bluestone";
if (worldMap[mapX][mapY] == "1") {
currentImg = "bluestone";
}
if (worldMap[mapX][mapY] == "2") {
currentImg = "greystone";
}
if (worldMap[mapX][mapY] == "3") {
currentImg = "wood";
}
if (worldMap[mapX][mapY] == "4") {
currentImg = "colorstone";
}
if (worldMap[mapX][mapY] == "5") {
currentImg = "eagle";
}
if (worldMap[mapX][mapY] == "6") {
currentImg = "mossy";
}
if (worldMap[mapX][mapY] == "7") {
currentImg = "redbrick";
}
if (worldMap[mapX][mapY] == "8") {
currentImg = "purplestone";
}
//if (worldMap[mapX][mapY] =="a") {currentImg = "barrel";}
//if (dist(mapX, mapY, posX, posY) > 20) {continue;}
can.drawImage(document.getElementById(currentImg), texX + ((worldMap[mapX][mapY] - 1) * 64), 0, 1, texHeight, x, drawStart, 1, drawEnd - drawStart);
//fill(255, 0, 0);rect(x, drawStart, 1, drawEnd - drawStart);
if (side === 1) {
fill(0, 0, 0, 0.3);
rect(x, drawStart, 1, drawEnd - drawStart);
}
//Set the ZBuffer
ZBuffer[x] = perpWallDist;
//FLOOR CASTING(not using till figure out how to do without lag)
var floorXWall = 0,
floorYWall = 0;
if (side == 0 && rayDirX > 0) {
floorXWall = mapX;
floorYWall = mapY + wallX;
} else if (side == 0 && rayDirX < 0) {
floorXWall = mapX + 1.0;
floorYWall = mapY + wallX;
} else if (side == 1 && rayDirY > 0) {
floorXWall = mapX + wallX;
floorYWall = mapY;
} else {
floorXWall = mapX + wallX;
floorYWall = mapY + 1.0;
}
var distWall, distPlayer, currentDist;
distWall = perpWallDist;
distPlayer = 0.0;
for (var y = drawEnd + 1; y < h; y++) {
//if (dist(mapX, mapY, posX, posY) > 5) {continue;}
currentDist = h / (2.0 * y - h); //you could make a small lookup table for this instead
var weight = (currentDist - distPlayer) / (distWall - distPlayer);
var currentFloorX = weight * floorXWall + (1.0 - weight) * posX;
var currentFloorY = weight * floorYWall + (1.0 - weight) * posY;
var floorTexX, floorTexY;
floorTexX = floor(currentFloorX * texWidth) % texWidth;
floorTexY = floor(currentFloorY * texHeight) % texHeight;
//OPTIMIZE FOR LESS LAG!!!!!!!!!! (search
//FLOOR
//can.drawImage(document.getElementById("greystone"), floorTexX, floorTexY, texWidth, texHeight, x, y, texWidth, texHeight);
//CEILING
//can.drawImage(document.getElementById("wood"), floorTexX, floorTexY, texWidth, 1, x, h - y, texWidth, 1);
} //End of the 'y' loop
} //end the loop
//SPRITE CASTING
//Sort sprites
sprite.sort(function(a, b) {
return b[3] - a[3];
}); //Sort the depth of each sprite
//Draw sprites
for (var i = 0; i < sprite.length; i++) {
var spriteX = sprite[i][0] - posX;
var spriteY = sprite[i][1] - posY;
sprite[i][3] = abs((posX - sprite[i][0]) - (posY - sprite[i][1]));
var invDet = 1.0 / (planeX * dirY - dirX * planeY);
var transformX = invDet * (dirY * spriteX - dirX * spriteY);
var transformY = invDet * (-planeY * spriteX + planeX * spriteY); //this is actually the depth inside the screen, that what Z is in 3D(Thanks lodev.org for explanation!)
var spriteScreenX = floor((w / 2) * (1 + transformX / transformY));
//calculate height of the sprite on screen
var spriteHeight = abs(floor(h / (transformY))); //using "transformY" instead of the real distance prevents fisheye
//calculate lowest and highest pixel to fill in current stripe
var drawStartY = -spriteHeight / 2 + h / 2;
//if (drawStartY < 0) {drawStartY = 0;} Don't need THIS
var drawEndY = spriteHeight / 2 + h / 2;
//if (drawEndY >= h) {drawEndY = h - 1;} Or THIS
//calculate width of the sprite
var spriteWidth = abs(floor(h / (transformY)));
var drawStartX = -spriteWidth / 2 + spriteScreenX;
//if (drawStartX < 0) {drawStartX = 0;} Nor this
var drawEndX = spriteWidth / 2 + spriteScreenX;
//if (drawEndX >= w) {drawEndX = w - 1;} Nor dis
//loop through every vertical stripe of the sprite on screen
for (var stripe = drawStartX; stripe < drawEndX; stripe++) {
var texX = floor(256 * (stripe - (-spriteWidth / 2 + spriteScreenX)) * texWidth / spriteWidth) / 256;
//the conditions in the if are:
//1) it's in front of camera plane so you don't see things behind you
//2) it's on the screen (left)
//3) it's on the screen (right)
//4) ZBuffer, with perpendicular distance
var ruffer = 0;
if (sprite[i][2] == "barrel") {
ruffer = 576 - 64;
}
if (sprite[i][2] == "pillar") {
ruffer = 576;
}
if (sprite[i][2] == "greenlight") {
ruffer = 576 + 64;
}
if (transformY > 0 && stripe > 0 && stripe < w && transformY < ZBuffer[stripe]) {
can.drawImage(document.getElementById(sprite[i][2]), texX + ruffer, 0, 1, texHeight, stripe, drawStartY, 1, drawEndY - drawStartY);
}
}
} //End of 'i' loop
//Bottom of dat
if (keys["W"]) {
if (worldMap[floor(posX + dirX * moveSpeed)][floor(posY)] == false) {
posX += dirX * moveSpeed
};
if (worldMap[floor(posX)][floor(posY + dirY * moveSpeed)] == false) {
posY += dirY * moveSpeed
};
}
//move backwards if no wall behind you
if (keys["S"]) {
if (worldMap[floor(posX - dirX * moveSpeed)][floor(posY)] == false) {
posX -= dirX * moveSpeed;
}
if (worldMap[floor(posX)][floor(posY - dirY * moveSpeed)] == false) {
posY -= dirY * moveSpeed;
}
}
if (keys["D"]) {
if (worldMap[floor(posX + planeX * moveSpeed)][floor(posY)] == false) {
posX += planeX * moveSpeed
};
if (worldMap[floor(posX)][floor(posY + planeY * moveSpeed)] == false) {
posY += planeY * moveSpeed
};
}
if (keys["A"]) {
if (worldMap[floor(posX - planeX * moveSpeed)][floor(posY)] == false) {
posX -= planeX * moveSpeed;
}
if (worldMap[floor(posX)][floor(posY - planeY * moveSpeed)] == false) {
posY -= planeY * moveSpeed;
}
}
//rotate to the right
mouseX = -mouseX / 75;
var oldDirX = dirX;
dirX = dirX * cos(mouseX) - dirY * sin(mouseX);
dirY = oldDirX * sin(mouseX) + dirY * cos(mouseX);
var oldPlaneX = planeX;
planeX = planeX * cos(mouseX) - planeY * sin(mouseX);
planeY = oldPlaneX * sin(mouseX) + planeY * cos(mouseX);
mouseX = 0;
if (keys["d"]) {
//both camera direction and camera plane must be rotated
var oldDirX = dirX;
dirX = dirX * cos(-rotSpeed) - dirY * sin(-rotSpeed);
dirY = oldDirX * sin(-rotSpeed) + dirY * cos(-rotSpeed);
var oldPlaneX = planeX;
planeX = planeX * cos(-rotSpeed) - planeY * sin(-rotSpeed);
planeY = oldPlaneX * sin(-rotSpeed) + planeY * cos(-rotSpeed);
}
//rotate to the left
if (keys["a"]) {
//both camera direction and camera plane must be rotated
var oldDirX = dirX;
dirX = dirX * cos(rotSpeed) - dirY * sin(rotSpeed);
dirY = oldDirX * sin(rotSpeed) + dirY * cos(rotSpeed);
var oldPlaneX = planeX;
planeX = planeX * cos(rotSpeed) - planeY * sin(rotSpeed);
planeY = oldPlaneX * sin(rotSpeed) + planeY * cos(rotSpeed);
}
};
var run = function() {
try {
if (document.pointerLockElement === canvas || document.mozPointerLockElement === canvas) {
document.addEventListener("mousemove", mouseMove, false);
} else {
document.removeEventListener("mousemove", mouseMove, false);
} //Mouse stuff
translate(0, 0);
scale(scaler, scaler);
fill(40, 40, 40);
rect(0, 0, w, h / 2);
fill(80, 80, 80);
rect(0, h / 2, w, h / 2);
if (keys["C"]) {
rotSpeed = 0.04;
} else {
rotSpeed = 0.1;
}
/*if (keys["W"]) {fill(255, 0, 0);}
if (keys["A"]) {fill(0, 255, 0);}
if (keys["S"]) {fill(0, 0, 255);}
if (keys["D"]) {fill(255, 0, 255);}
if (keys["X"]) {fill(255, 255, 0);}
if (keys["Z"]) {fill(0, 255, 255);}*/
castRays();
trestore();
requestAnimationFrame(run);
} catch (e) {
alert(e);
}
};
run();
<html>
<title>Jailbreak</title>
<div class="center">
<canvas width="640" height="480" id="canva"></canvas>
<br>
<img id="barrel" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="pillar" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="greenlight" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="bluestone" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="greystone" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="wood" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="colorstone" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="eagle" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="mossy" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="redbrick" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
<img id="purplestone" src="https://lodev.org/cgtutor/images/wolftexturesobj.gif">
</div>
</html>
UPDATE: I tried changing
if (
transformY > 0 &&
stripe > 0 &&
stripe < w &&
transformY < ZBuffer[stripe]//Pay attention to this line
) {
to:
if (
transformY > 0 &&
stripe > 0 &&
stripe < w &&
transformY > ZBuffer[stripe]//Now look
) {
Which basically reverses the check to see if it is behind a wall. Surprisingly, the blinking continues.

The answer was pretty simple. It was because stripe is not an even value, and if you were to have an array like this: var thisArray = [1, 2, 3, 4]; and you were to try and grab var money = thisArray[1.5]; the value undefined would be returned.
So I changed this:
if (
transformY > 0 &&
stripe > 0 &&
stripe < w &&
transformY < ZBuffer[stripe]
) {
To this:
if (
transformY > 0 &&
stripe > 0 &&
stripe < w &&
transformY < ZBuffer[Math.round(stripe)]
) {
Math.floor also works, since it also returns an integer value.

I have tried to put a start button to my game or a start menu , but every time I try something my game stops working , I have tried a lot of stuffs that I have found online but every time it do-sent work and my game just disappear.
My game is a Snake game in javascript ,that I am trying to insert in my web page, I have found the script online I am not very good in coding. I have just started.
I know some things and I am learning every day but I still consider my self a noob.
So this is the script
i wana put the start button in front of the game
my script begin by // body onload="init()"
the body onload , i dont have see it in the examples that i had see online
function init() {
var ctx;
var turn = [];
var xV = [-1, 0, 1, 0];
var yV = [0, -1, 0, 1];
var queue = [];
var elements = 1;
var map = [];
var X = 5 + (Math.random() * (45 - 10)) | 0;
var Y = 5 + (Math.random() * (30 - 10)) | 0;
var direction = Math.random() * 3 | 0;
var interval = 0;
var score = 0;
var inc_score = 50;
var sum = 0, easy = 0;
var i, dir;
var canvas = document.createElement('canvas');
for (i = 0; i < 45; i++) {
map[i] = [];
}
canvas.setAttribute('width', 45 * 10);
canvas.setAttribute('height', 30 * 10);
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
function placeFood() {
var x, y;
do {
x = Math.random() * 45 | 0;
y = Math.random() * 30 | 0;
} while (map[x][y]);
map[x][y] = 1;
ctx.strokeRect(x * 10 + 1, y * 10 + 1, 10 - 2, 10 - 2);
}
placeFood();
function clock() {
if (easy) {
X = (X + 45) % 45;
Y = (Y + 30) % 30;
}
--inc_score;
if (turn.length) {
dir = turn.pop();
if ((dir % 2) !== (direction % 2)) {
direction = dir;
}
}
if (
(easy || (0 <= X && 0 <= Y && X < 45 && Y < 30))
&& 2 !== map[X][Y]) {
if (1 === map[X][Y]) {
score += Math.max(5, inc_score);
inc_score = 50;
placeFood();
elements++;
}
ctx.fillRect(X * 10, Y * 10, 10 - 1, 10 - 1);
map[X][Y] = 2;
queue.unshift([X, Y]);
X += xV[direction];
Y += yV[direction];
if (elements < queue.length) {
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
} else if (!turn.length) {
if (confirm("nice try,keep winning satoshis ! Play again? Your Score is " + score)) {
ctx.clearRect(0, 0, 450, 300);
queue = [];
elements = 1;
map = [];
X = 5 + (Math.random() * (45 - 10)) | 0;
Y = 5 + (Math.random() * (30 - 10)) | 0;
direction = Math.random() * 3 | 0;
score = 0;
inc_score = 50;
for (i = 0; i < 45; i++) {
map[i] = [];
}
placeFood();
} else {
window.clearInterval(interval);
window.location = "/projects/";
}
}
}
interval = window.setInterval(clock, 60);
document.onkeydown = function (e) {
var code = e.keyCode - 37;
/*
* 0: left
* 1: up
* 2: right
* 3: down
**/
if (0 <= code && code < 4 && code !== turn[0]) {
turn.unshift(code);
} else if (-5 == code) {
if (interval) {
window.clearInterval(interval);
interval = null;
} else {
interval = window.setInterval(clock, 60);
}
} else { // O.o
dir = sum + code;
if (dir == 44 || dir == 94 || dir == 126 || dir == 171) {
sum += code
} else if (dir === 218) easy = 1;
}
}
}

Is this good?
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<style>
canvas {
border: 1px solid;
}
#btn {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<input type="button" value="Start" onclick="init()" id="btn" />
<script>
function init()
{
var ctx;
var turn = [];
var xV = [-1, 0, 1, 0];
var yV = [0, -1, 0, 1];
var queue = [];
var elements = 1;
var map = [];
var X = 5 + (Math.random() * (45 - 10)) | 0;
var Y = 5 + (Math.random() * (30 - 10)) | 0;
var direction = Math.random() * 3 | 0;
var interval = 0;
var score = 0;
var inc_score = 50;
var sum = 0, easy = 0;
var i, dir;
var canvas = document.createElement('canvas');
for (i = 0; i < 45; i++)
{
map[i] = [];
}
canvas.setAttribute('width', 45 * 10);
canvas.setAttribute('height', 30 * 10);
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
function placeFood()
{
var x, y;
do
{
x = Math.random() * 45 | 0;
y = Math.random() * 30 | 0;
} while (map[x][y]);
map[x][y] = 1;
ctx.strokeRect(x * 10 + 1, y * 10 + 1, 10 - 2, 10 - 2);
}
placeFood();
function clock()
{
if (easy)
{
X = (X + 45) % 45;
Y = (Y + 30) % 30;
}
--inc_score;
if (turn.length)
{
dir = turn.pop();
if ((dir % 2) !== (direction % 2))
{
direction = dir;
}
}
if (
(easy || (0 <= X && 0 <= Y && X < 45 && Y < 30))
&& 2 !== map[X][Y])
{
if (1 === map[X][Y])
{
score += Math.max(5, inc_score);
inc_score = 50;
placeFood();
elements++;
}
ctx.fillRect(X * 10, Y * 10, 10 - 1, 10 - 1);
map[X][Y] = 2;
queue.unshift([X, Y]);
X += xV[direction];
Y += yV[direction];
if (elements < queue.length)
{
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
} else if (!turn.length)
{
if (confirm("nice try,keep winning satoshis ! Play again? Your Score is " + score))
{
ctx.clearRect(0, 0, 450, 300);
queue = [];
elements = 1;
map = [];
X = 5 + (Math.random() * (45 - 10)) | 0;
Y = 5 + (Math.random() * (30 - 10)) | 0;
direction = Math.random() * 3 | 0;
score = 0;
inc_score = 50;
for (i = 0; i < 45; i++)
{
map[i] = [];
}
placeFood();
} else
{
window.clearInterval(interval);
window.location = "/projects/";
}
}
}
interval = window.setInterval(clock, 60);
document.onkeydown = function (e)
{
var code = e.keyCode - 37;
if (0 <= code && code < 4 && code !== turn[0])
{
turn.unshift(code);
} else if (-5 == code)
{
if (interval)
{
window.clearInterval(interval);
interval = null;
} else
{
interval = window.setInterval(clock, 60);
}
} else
{ // O.o
dir = sum + code;
if (dir == 44 || dir == 94 || dir == 126 || dir == 171)
{
sum += code
} else if (dir === 218) easy = 1;
}
}
}
</script>
</body>

Fiddle: http://jsfiddle.net/7zomjc7z/
JavaScript:
function init() {
var ctx;
var turn = [];
var xV = [-1, 0, 1, 0];
var yV = [0, -1, 0, 1];
var queue = [];
var elements = 1;
var map = [];
var MR = Math.random;
var X = 5 + (MR() * (100 - 10)) | 0;
var Y = 5 + (MR() * (30 - 10)) | 0;
var direction = MR() * 3 | 0;
var interval = 0;
var score = 0;
var inc_score = 50;
var sum = 0,
easy = 0;
var i, dir;
var win = window;
var doc = document;
var canvas = doc.createElement('canvas');
var setInt = win.setInterval;
var clInt = win.clearInterval;
for (i = 0; i < 100; i++) {
map[i] = [];
}
canvas.setAttribute('width', 100 * 10);
canvas.setAttribute('height', 30 * 10);
ctx = canvas.getContext('2d');
var div = document.getElementById("pnlGame");
div.appendChild(canvas);
//doc.body.appendChild(canvas);
function placeFood() {
var x, y;
do {
x = MR() * 100 | 0;
y = MR() * 30 | 0;
} while (map[x][y]);
map[x][y] = 1;
ctx.strokeRect(x * 10 + 1, y * 10 + 1, 10 - 2, 10 - 2);
}
placeFood();
function clock() {
if (easy) {
X = (X + 100) % 100;
Y = (Y + 30) % 30;
}
--inc_score;
if (turn.length) {
dir = turn.pop();
if ((dir % 2) !== (direction % 2)) {
direction = dir;
}
}
if (
(easy || (0 <= X && 0 <= Y && X < 100 && Y < 30))
&& 2 !== map[X][Y]) {
if (1 === map[X][Y]) {
score += Math.max(5, inc_score);
inc_score = 50;
placeFood();
elements++;
}
ctx.fillRect(X * 10, Y * 10, 10 - 1, 10 - 1);
map[X][Y] = 2;
queue.unshift([X, Y]);
X += xV[direction];
Y += yV[direction];
if (elements < queue.length) {
dir = queue.pop()
map[dir[0]][dir[1]] = 0;
ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);
}
} else if (!turn.length) {
if (confirm("You lost! Play again? Your Score is " + score)) {
ctx.clearRect(0, 0, 450, 300);
queue = [];
elements = 1;
map = [];
X = 5 + (MR() * (100 - 10)) | 0;
Y = 5 + (MR() * (30 - 10)) | 0;
direction = MR() * 3 | 0;
score = 0;
inc_score = 50;
for (i = 0; i < 100; i++) {
map[i] = [];
}
placeFood();
} else {
clInt(interval);
//window.location = "YourTasks.aspx";
}
}
}
interval = setInt(clock, 120);
doc.onkeydown = function (e) {
var code = e.keyCode - 37;
/*
* 0: left
* 1: up
* 2: right
* 3: down
**/
if (0 <= code && code < 4 && code !== turn[0]) {
turn.unshift(code);
} else if (-5 == code) {
if (interval) {
clInt(interval);
interval = 0;
} else {
interval = setInt(clock, 120);
}
} else { // O.o
dir = sum + code;
if (dir == 44 || dir == 94 || dir == 126 || dir == 171) {
sum += code
} else if (dir === 218) easy = 1;
}
}
}
When there is no more turn left and the javascript alert is shown, the snake square get stuck and the canvas doesn't clear.
How can I resolve it?

You've set the width of your canvas to 1000 (canvas.setAttribute('width', 100 * 10);)
where you are clearing it you are only clearing a 450 wide box
ctx.clearRect(0, 0, 450, 300);
You need to change this to
ctx.clearRect(0, 0, 1000, 300);

I need some expert help. When I make canvas background transparent the line colors the whole canvas (shown in code below).
How do I stop/fix this? I want the line stay as a single line that doesn't color the canvas.
Math.clamp = function(x, min, max) {
return x < min ? min : (x > max ? max : x);
};
// canvas settings
var viewWidth = window.innerWidth,
viewHeight = window.innerHeight,
drawingCanvas = document.getElementById("drawing_canvas"),
ctx,
timeStep = (10 / 100),
time = 0;
var lineTension = 0.067,
lineDamping = 0.068,
waveSpreadFactor = 0.1;
var previousMousePosition = {
x: 0,
y: 0
},
currentMousePosition = {
x: 0,
y: 0
},
actualMousePosition = {
x: 0,
y: 0
};
var line,
lineSegmentCount = 64,
lineMaxForce = 32,
lineStrokeGradient;
var audioCtx,
nodeCount = 64,
oscillatorNodes = [],
gainNodes = [];
var segmentsPerNode = lineSegmentCount / nodeCount;
function initGui() {
}
function goBananas() {
lineTension = 0.2;
line.anchors[Math.floor(Math.random() * line.anchors.length)].
vel = lineMaxForce;
}
function resetLine() {
line.reset();
for (var i = 0; i < nodeCount; i++) {
oscillatorNodes[i].detune.value = 100;
gainNodes[i].gain.value = 0;
}
lineTension = 0.0025;
lineDamping = 0.05;
waveSpreadFactor = 0.1;
}
function initDrawingCanvas() {
drawingCanvas.width = viewWidth;
drawingCanvas.height = viewHeight;
window.addEventListener('resize', resizeHandler);
window.addEventListener('mousemove', mouseMoveHandler);
setInterval(updateMousePosition, (1000 / 30));
ctx = drawingCanvas.getContext('2d');
ctx.lineWidth = 5;
line = new Line(0, viewHeight * 0.5, viewWidth, lineSegmentCount);
// line.anchors[0].vel = viewHeight * 0.25;
lineStrokeGradient = ctx.createLinearGradient(0, 0, 0, viewHeight);
lineStrokeGradient.addColorStop(0, '#0ff');
}
function initWebAudio() {
audioCtx = new(window.AudioContext || window.webkitAudioContext)();
for (var i = 0; i < nodeCount; i++) {
var oscillatorNode = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
oscillatorNode.connect(gainNode);
gainNode.connect(audioCtx.destination);
gainNode.gain.value = 0;
oscillatorNode.type = 'saw';
oscillatorNode.detune.value = 200;
oscillatorNode.frequency.value = 1200 * (i / 60);
oscillatorNode.start();
oscillatorNodes[i] = oscillatorNode;
gainNodes[i] = gainNode;
}
}
function resizeHandler() {
drawingCanvas.width = viewWidth = window.innerWidth;
drawingCanvas.height = viewHeight = window.innerHeight;
if (ctx) {
ctx.lineWidth = 4;
line.resize(viewWidth, viewHeight * 0.5);
}
}
function mouseMoveHandler(event) {
actualMousePosition.x = Math.floor(event.clientX);
actualMousePosition.y = Math.floor(event.clientY);
}
function updateMousePosition() {
previousMousePosition.x = currentMousePosition.x;
previousMousePosition.y = currentMousePosition.y;
currentMousePosition.x = actualMousePosition.x;
currentMousePosition.y = actualMousePosition.y;
}
function update() {
var px = Math.min(previousMousePosition.x, currentMousePosition.x),
py = Math.min(previousMousePosition.y, currentMousePosition.y),
pw = Math.max(1, Math.abs(previousMousePosition.x - currentMousePosition.x)),
ph = Math.max(1, Math.abs(previousMousePosition.y - currentMousePosition.y)),
force = Math.clamp(currentMousePosition.y -
previousMousePosition.y, -lineMaxForce, lineMaxForce);
var pixels = ctx.getImageData(px, py, pw, ph),
data = pixels.data;
for (var i = 0; i < data.length; i += 3) {
var r = data[i + 0],
g = data[i + 1],
b = data[i + 2],
x = (i % ph) + px;
if (r + g + b > 0) {
line.ripple(x, force);
}
}
line.update();
for (var j = 0; j < gainNodes.length; j++) {
var anchor = line.anchors[j * segmentsPerNode],
gain = Math.clamp(Math.abs(anchor.vel) / viewHeight * 0.5, 0, 3),
detune = Math.clamp(anchor.pos / viewHeight * 100, 0, 300);
gainNodes[j].gain.value = gain;
oscillatorNodes[j].detune.value = detune;
}
}
function draw() {
ctx.strokeStyle = lineStrokeGradient;
line.draw();
}
window.onload = function() {
initDrawingCanvas();
initWebAudio();
initGui();
requestAnimationFrame(loop);
};
function loop() {
update();
draw();
time += timeStep;
requestAnimationFrame(loop);
}
Line = function(x, y, length, segments) {
this.x = x;
this.y = y;
this.length = length;
this.segments = segments;
this.segmentLength = this.length / this.segments;
this.anchors = [];
for (var i = 0; i <= this.segments; i++) {
this.anchors[i] = {
target: this.y,
pos: this.y,
vel: 0,
update: function() {
var dy = this.pos - this.target,
acc = -lineTension * dy - lineDamping * this.vel;
this.pos += this.vel;
this.vel += acc;
},
reset: function() {
this.pos = this.target;
this.vel = 0;
}
};
}
};
Line.prototype = {
resize: function(length, targetY) {
this.length = length;
this.segmentLength = this.length / this.segments;
for (var i = 0; i <= this.segments; i++) {
this.anchors[i].target = targetY;
}
},
reset: function() {
for (var i = 0; i <= this.segments; i++) {
this.anchors[i].reset();
}
},
ripple: function(origin, amplitude) {
var i = Math.floor((origin - this.x) / this.segmentLength);
if (i >= 0 && i <= this.segments) {
this.anchors[i].vel = amplitude;
}
},
update: function() {
var lDeltas = [],
rDeltas = [],
i;
for (i = 0; i <= this.segments; i++) {
this.anchors[i].update();
}
for (i = 0; i <= this.segments; i++) {
if (i > 0) {
lDeltas[i] = waveSpreadFactor * (this.anchors[i].pos - this.anchors[i - 1].pos);
this.anchors[i - 1].vel += lDeltas[i];
}
if (i < this.segments) {
rDeltas[i] = waveSpreadFactor * (this.anchors[i].pos - this.anchors[i + 1].pos);
this.anchors[i + 1].vel += rDeltas[i];
}
}
for (i = 0; i <= this.segments; i++) {
if (i > 0) {
this.anchors[i - 1].pos += lDeltas[i];
}
if (i < this.segments) {
this.anchors[i + 1].pos += rDeltas[i];
}
}
},
draw: function() {
ctx.beginPath();
for (var i = 0; i <= this.segments; i++) {
ctx.lineTo(
this.x + this.segmentLength * i,
this.anchors[i].pos
);
}
ctx.stroke();
}
};

From the code you posted, the problem seems to be a missing
ctx.clearRect(0, 0, viewWidth, viewHeight)
at the beginning of your "draw" function.
See a working example here

I was wondering if it was possible to have mouseover events with multiple squares on a canvas
this is my code right now: http://jsfiddle.net/2j3u9f7m/
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var Enemy = function (x, y, velx, vely) {
this.x = x;
this.y = y;
this.velx = 0;
this.vely = 0;
}
Enemy.prototype.update = function () {
var tx = 650 - this.x;
var ty = 250 - this.y;
var dist = Math.sqrt(tx * tx + ty * ty);
this.velx = (tx / dist);
this.vely = (ty / dist);
if (dist > 0) {
this.x += this.velx;
this.y += this.vely;
}
};
Enemy.prototype.render = function () {
context.fillStyle = '#000000';
context.beginPath();
context.rect(this.x, this.y, 25, 25);
context.fill();
context.closePath();
};
var enemies = [];
for (var i = 0; i < 10; i++) {
// random numbers from 0 (inclusive) to 100 (exclusive) for example:
var randomX = Math.random() * 896;
var randomY = Math.random() * 1303;
console.log(randomX);
console.log(randomY);
if (randomX > 100 && randomX < 1200) {
if (randomX % 2 == 0) {
randomX = 140;
} else {
randomX = 1281;
}
}
if (randomY > 100 && randomY < 75) {
if (randomY % 2 == 0) {
randomY = 15;
} else {
randomY = 560;
}
}
var enemy = new Enemy(randomX, randomY, 0, 0);
enemies.push(enemy);
}
for (var i = 0; i < 15; i++) {
// random numbers from 0 (inclusive) to 100 (exclusive) for example:
var randomX = Math.random() * 200;
var randomY = Math.random() * 403;
console.log(randomX);
console.log(randomY);
if (randomX > 100 && randomX < 1200) {
if (randomX % 2 == 0) {
randomX = 140;
} else {
randomX = 1281;
}
}
if (randomY > 100 && randomY < 75) {
if (randomY % 2 == 0) {
randomY = 15;
} else {
randomY = 560;
}
}
var enemy = new Enemy(randomX, randomY, 0, 0);
enemies.push(enemy);
}
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < enemies.length; i++) {
var one = enemies[i];
one.update();
one.render();
}
requestAnimationFrame(render);
}
render();
What I want to do is to have a mouseover event for each square; is there a way to do this without using a library?

You can extend your Enemy object doing a region check like this:
Enemy.prototype.isOnEnemy = function(x, y) {
return (x >= this.x && x < this.x + 25 && // 25 = width
y >= this.y && y < this.y + 25); // 25 = height
};
If the provided (x,y) position is inside the rectangle (here assuming width and height of 25) it will return true.
Then add a mousemove event listener to the canvas. Inside adjust the mouse position, then feed the muse position to each enemy object to check:
context.canvas.onmousemove = function(e) {
var rect = this.getBoundingClientRect(), // correct mouse position
x = e.clientX - rect.left,
y = e.clientY - rect.top,
i = 0;
for(; i < enemies.length; i++) { // check each enemy
if (enemies[i].isOnEnemy(x, y)) { // is inside?
console.log("AAAARG...", i); // some action...
}
}
};
Modified fiddle (see console for hits).