Develop Reference

AudioContext and animation do not work on iPhone

I have this little code snippet here
var context = new(window.AudioContext || window.webkitAudioContext)();
.....
var source = context.createMediaElementSource(audio);
var analyser = context.createAnalyser();
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
source.connect(analyser);
analyser.connect(context.destination);
analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
var WIDTH = canvas.width;
var HEIGHT = canvas.height + (canvas.height * 0.7);
var barWidth = (WIDTH / bufferLength) * 2.5;
var barHeight;
var x = 0;
function renderFrame() {
x = 0;
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
analyser.getByteFrequencyData(dataArray);
for (var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
var r = barHeight + (25 * (i / bufferLength));
var g = 250 * (i / bufferLength);
var b = 50;
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
requestAnimationFrame(renderFrame);
}
requestAnimationFrame(renderFrame);
audio.src = jQuery("source").attr("src");
audio.play();
Full code and demo here: https://jsfiddle.net/6gv39mk0/1/show
That basically shows a dynamic waveform when audio is played
It works on desktop browser, android browser, but no way to make it works on iPhone. Am I missing something or is there something that I must declare/do differently?

I've solved this issue with a transparent button on top of play button. this probably make iPhone browsers understand that there is an interaction. After that the button is hidden (z-index -1)
It's not that elegant as solution, but it work!
var button = document.createElement('button');
jQuery(button).attr('id', 'btn');
jQuery(canva).before(button);
jQuery(button).on('click', function() {
start();
jQuery(button).remove();
})
here it is the fiddle https://jsfiddle.net/L1trwz7o/

JS windows.onload does not work

onload that create 2 graphs and display them. they both worked when they where onclick="draw1()" but when i change them to onload only the last graph works with the onload
My First Graph
<script>
window.onload = function draw1() {
var n = "114,19,20,21,22,23,24";
var values = n.split(',');
var canvas = document.getElementById('myCanvas1');
var ctx = canvas.getContext('2d');
var width = 26; //bar width
var X = 60 // 60; // first bar position
var base = canvas.height;
var skipint = 0;
for (var i =0; i<values.length; i++) {
skipint ++;
var h = values[i];
var pers = h * (base / 100);
ctx.fillRect(X,canvas.height - pers,width,pers);
}
ctx.fillStyle = '#050505';
ctx.font="22px bold Arial";
ctx.fillText(' 0 %',0,canvas.height);
ctx.fillText(' 50 %',0,canvas.height /2 + 11);
ctx.fillText('100 %',0,canvas.height - canvas.height + 22);
}
</script>
My 1st canvas:
<canvas id="myCanvas1">
</canvas>
My Second graph
<script>
window.onload = function draw2() {
var n = "22,22,23,24";
var values = n.split(',');
//get the myCanvas2 byID
var canvas = document.getElementById('myCanvas2');
var ctx = canvas.getContext('2d');
var width = 26; //bar width
var X = 60 // 60; // first bar position
var base = canvas.height;
var skipint = 0;
//skips evry 3 bars
for (var i =0; i<values.length; i++) {
skipint ++;
var h = values[i];
var pers = h * (base / 100);
ctx.fillRect(X,canvas.height - pers,width,pers);
}
ctx.fillStyle = '#050505';
ctx.font="22px bold Arial";
ctx.fillText(' 0 %',0,canvas.height);
ctx.fillText(' 50 %',0,canvas.height /2 + 11);
ctx.fillText('100 %',0,canvas.height - canvas.height + 22);
}
</script>
My second canvas
<canvas id="myCanvas2">
</canvas>
Question:
How do i get both my graphs to work with window.onload?

You can declare each function, and then create a single function to call them both. I think it's easier to debug if you declare the functions outside of the event handler and then call them with the onload handler.
<script>
function draw1() {
var n = "114,19,20,21,22,23,24";
var values = n.split(',');
var canvas = document.getElementById('myCanvas1');
var ctx = canvas.getContext('2d');
var width = 26; //bar width
var X = 60 // 60; // first bar position
var base = canvas.height;
var skipint = 0;
for (var i = 0; i < values.length; i++) {
skipint++;
var h = values[i];
var pers = h * (base / 100);
ctx.fillRect(X, canvas.height - pers, width, pers);
}
ctx.fillStyle = '#050505';
ctx.font = "22px bold Arial";
ctx.fillText(' 0 %', 0, canvas.height);
ctx.fillText(' 50 %', 0, canvas.height / 2 + 11);
ctx.fillText('100 %', 0, canvas.height - canvas.height + 22);
}
</script>
<p>My first canvas</p>
<canvas id="myCanvas1">
</canvas>
<script>
function draw2() {
var n = "22,22,23,24";
var values = n.split(',');
//get the myCanvas2 byID
var canvas = document.getElementById('myCanvas2');
var ctx = canvas.getContext('2d');
var width = 26; //bar width
var X = 60 // 60; // first bar position
var base = canvas.height;
var skipint = 0;
//skips evry 3 bars
for (var i = 0; i < values.length; i++) {
skipint++;
var h = values[i];
var pers = h * (base / 100);
ctx.fillRect(X, canvas.height - pers, width, pers);
}
ctx.fillStyle = '#050505';
ctx.font = "22px bold Arial";
ctx.fillText(' 0 %', 0, canvas.height);
ctx.fillText(' 50 %', 0, canvas.height / 2 + 11);
ctx.fillText('100 %', 0, canvas.height - canvas.height + 22);
}
</script>
<p>My second canvas</p>
<canvas id="myCanvas2">
</canvas>
<script>
window.onload = function() {
draw1();
draw2();
}
</script>

Image not showing up on canvas onload

I'm trying to make a player image move around on a canvas. The player image doesn't show up on load. I used an alert to check the onload and it does seem to be running but the image is not displayed.
The player image does not show up if I only move left and right, and it does not show up if I only move up and down. The image does show up after I have moved in both the X and Y directions which makes me think that the X and Y are not correctly set until my animation function sets them. I can't see what is wrong with the initial X and Y onload though I'm using my own images on my computer but I just plugged in some random pictures so you guys could see something load.
I just put the whole code on here I don't know if that is too much but I'm not sure what I did wrong. I'm very new at this and this is my first time posting a question on here. I would appreciate if someone tells me what I'm doing wrong.
edit: I changed
var destX = xToCenter;
var destY = yToCenter;
to just the actual numbers
var destX = 260;
var destY = 220;
and that works but I don't really understand why. Can someone explain why I can't use xToCenter and yToCenter for onload but it works during the movement function?
here is my jsfiddle
//create canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
//create background canvas
var worldCanvas = document.getElementById("worldCanvas");
var wctx = worldCanvas.getContext('2d');
worldCanvas.width = 600;
worldCanvas.height = 600;
//player image
var avatar = new Image();
var sourceX = 32;
var sourceY = 32;
var sourceWidth = 16;
var sourceHeight = 32;
var destWidth = sourceWidth * 5;
var destHeight = sourceHeight * 5;
var destX = xToCenter;
var destY = yToCenter;
var speed = 4;
var faceRight = 0;
var faceLeft = 1;
var faceDown = 2;
var faceUp = 3;
var animation = [0, 32, 64];
var i = 0;
//background image
var worldMap = new Image();
var sMapX = 0;
var sMapY = 0;
var sMapWidth = canvas.width;
var sMapHeight = canvas.height;
var dMapX = 0;
var dMapY = 0;
var dMapWidth = canvas.width;
var dMapHeight = canvas.height;
var worldWidth = 1280;
var worldHeight = 873;
//center player
var xToCenter = (0.5 * dMapWidth - 0.5 * destWidth);
var yToCenter = (0.5 * dMapHeight - 0.5 * destHeight);
//load and draw background
worldMap.src = "http://img06.deviantart.net/75db/i/2013/332/5/2/random_background_by_electriczerox-d6vyp1u.png";
worldMap.onload = function() {
wctx.drawImage(worldMap, sMapX, sMapY, sMapWidth, sMapHeight, dMapX, dMapY, dMapWidth, dMapHeight);
alert("worldMap loaded");
}
//load and draw avatar
avatar.src = "http://www.somerandomfacts.com/wp-content/uploads/2013/11/jpg1";
avatar.onload = function() {
ctx.drawImage(avatar, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
alert("avatar loaded");
}
//clear and redraw
;
(function() {
function main() {
window.requestAnimationFrame(main);
wctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
wctx.drawImage(worldMap, sMapX, sMapY, sMapWidth, sMapHeight, dMapX, dMapY, dMapWidth, dMapHeight);
ctx.drawImage(avatar, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
}
main();
})();
//move avatar
window.addEventListener('keydown', function(event) {
var keyPressed = event.keyCode;
switch (keyPressed) {
//a moves left
case 65:
if (sMapX > 0) sMapX -= speed;
destX = xToCenter;
sourceX = faceLeft * sourceWidth;
animationLoop();
sourceY = animation[i];
break;
//w moves up
case 87:
if (sMapY > 0) sMapY -= speed;
destY = yToCenter;
sourceX = faceUp * sourceWidth;
animationLoop();
sourceY = animation[i];
break;
//d moves right
case 68:
if (sMapX < worldWidth - dMapWidth) sMapX += speed;
destX = xToCenter;
sourceX = faceRight * sourceWidth;
animationLoop();
sourceY = animation[i];
break;
//s moves down
case 83:
if (sMapY < worldHeight - dMapHeight) sMapY += speed;
destY = yToCenter;
sourceX = faceDown * sourceWidth;
animationLoop();
sourceY = animation[i];
break;
}
});
//animate while moving
function animationLoop() {
window.requestAnimationFrame(changeI);
}
function changeI() {
if (i <= animation.length) i += 1;
animation[i];
if (i == animation.length) i = 0;
}
.canvas {
border: 1px solid;
position: fixed;
top: 0;
left: 0;
}
.worldCanvas {
border: 1px solid;
z-index: -1;
position: fixed;
top: 0;
left: 0;
}
<canvas class="canvas" id="canvas"></canvas>
<canvas class="worldCanvas" id="worldCanvas"></canvas>

I'm still learning but I think I can answer my own question. When I create a variable I should give it an initial value before I set it equal to another variable.

Trouble with createLinearGradient in canvas

I have a trouble with linear gradient in canvas.
I'm trying to create and animate a dynamic canvas element after clicking somewhere in the screen and it's working on the desktop but it doesn't seem to work on Mobile (chrome) if I use ctx.createLinearGradient to fill the circle that was created.
var circle = new Circle(circleProp);//circleProp is all propertys for new circle
function onMenuClick(e){
e.preventDefault();
e.stopPropagation();
var posX = e.pageX || e.changedTouches[0].pageX;
var posY = e.pageY || e.changedTouches[0].pageY;
if(menuToggle){
circle.paint(usrAllCont);// here is ewerything to make it work;
usrMenu.style.display = "block";
usrMenu.style.zIndex = "100";
usrMenu.opacity();
menuToggle = false;
}else{
usrMenu.opacity();
menuToggle = true;
circle.paint(usrAllCont);// here is ewerything to make it work back;
}
}
Thanks you!
[Include questioner's test code from their comment]
var Circle = function(prop){
this.width = prop.width;
this.height = prop.height;
this.r = prop.r;
this.halfR = this.r / 2;
this.step = this.r / 30;
this.currentStep = this.r / 30;
this.inProcesStep;
this.x = prop.defX;
this.y = prop.defY;
this.anim = true;
this.toggleAnim = false;
this.resize = false;
this.direction = "front";
this.canvas = document.createElement("canvas");
this.ctx = this.canvas.getContext("2d");
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.style.position = "absolute";
this.canvas.style.top = "0px";
//this.color = "rgb(25,245,170)"
this.gradient = this.ctx.createLinearGradient(0,0, 0, prop.height);
this.gradient.addColorStop(0,"rgb(100,150,250");
this.gradient.addColorStop(1,"rgb(0,250,250");
};
Circle.prototype.paint = function(parent){
this.parent = parent;
this.parent.appendChild(this.canvas);
var ctx = this.ctx;
ctx.fillStyle = this.gradient;
ctx.beginPath();
ctx.arc(this.x, this.y, this.halfR ,0 ,2*Math.PI);
ctx.fill();
};
var w = document.documentElement.clientWidth;
var h = window.screen.height;
var radius = function(width, height){
var sum = Math.pow(width, 2) + Math.pow(height, 2);
return Math.sqrt(sum);
};
var conteiner = document.getElementById("conteiner");
var btn = document.getElementById("btn");
btn.addEventListener("click", onBtnClick);
btn.addEventListener("touchend", onBtnClick);
var circleProp = {
width: w,
height: h,
r: radius(w, h),
defX: 25,
defY: 25
};
var circle = new Circle(circleProp);
function onBtnClick(e){
e.preventDefault();
e.stopPropagation();
var posX = e.pageX || e.changedTouches[0].pageX;
var posY = e.pageY || e.changedTouches[0].pageY;
circle.paint(conteiner);
}
<div id="btn">click me</div>
<div id="conteiner"></div>

How can I fullscreen my canvas & make it fill the screen?

I have a HTML5 canvas that when it goes into fullscreen, it does not fill the entire screen.
If I change only the canvas.style.width/height then it works but the display looks bad and also the mouse coordinates are misplaced.
js
var canvas = document.getElementById("canvas");
var mouseX = 0;
var mouseY = 0;
canvas.style.left = 0;
canvas.style.top = 0;
onmousemove = function(event) {
mouseX = (event.pageX - parseFloat(canvas.style.left, 10)) + document.body.scrollLeft;
mouseY = (event.pageY - parseFloat(canvas.style.top, 10)) + document.body.scrollTop;
}
document.body.addEventListener("keydown", function (event) {
switch (event.keyCode) {
case 70:
if (canvas.requestFullScreen) {
canvas.requestFullScreen();
}
else if (canvas.webkitRequestFullScreen) {
canvas.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
else if (canvas.mozRequestFullScreen) {
canvas.mozRequestFullScreen();
}
break;
}
});
function on_fullscreen_change() {
if(document.mozFullScreen || document.webkitIsFullScreen) {
canvas.style.position = "absolute";
canvas.style.left = 0;
canvas.style.top = 0;
canvas.style.width = screen.width+"px";
canvas.style.height = screen.height+"px";
canvas.width = parseFloat(canvas.style.width, 10);
canvas.height = parseFloat(canvas.style.height, 10);
}
else {
canvas.style.left = 0;
canvas.style.top = 0;
canvas.style.width = "1280px";
canvas.style.height = "720px";
canvas.width = parseFloat(canvas.style.width, 10);
canvas.height = parseFloat(canvas.style.height, 10);
}
}
document.addEventListener('mozfullscreenchange', on_fullscreen_change);
document.addEventListener('webkitfullscreenchange', on_fullscreen_change);
window.setInterval(function(){
var context = canvas.getContext('2d');
context.fillStyle = '#0e6eae';
context.fillRect(mouseX, mouseY, 150, 100);
}, 10);
function getMouseX(){
return mouseX;
}
function getMouseY(){
return mouseY;
}
css
:-webkit-full-screen { width: 100%; height: 100%; background: #000; }
EDIT: You can download test files at http://liveweave.com/g5WLW5

Try adding:
canvas.width = screen.width;
canvas.height = screen.height;
canvas.width and canvas.style.width are two different things. The first resizes the context of the canvas, while the second scales the representation of it.