I am building a musical application in which when an area is pressed, a sound will be produced. However I am unable to link the sound file to my shape on the canvas.
I am using the moveTo & lineTo methods to create my shape and would want to implement a sound file to the area. How do I go about doing this? Should I be using an element or a function?
Currently, this is what I have so far:
<canvas id="myCanvas" width="850" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
$(function(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var C = (function () {
context.beginPath();
context.moveTo(20, 20);
context.lineTo(60, 20);
context.moveTo(20, 20);
context.lineTo(20, 230);
context.moveTo(60, 20);
context.lineTo(60, 160);
context.moveTo(60, 160);
context.lineTo(75, 160);
context.moveTo(75, 160);
context.lineTo(75, 230);
context.moveTo(75, 230);
context.lineTo(20, 230);
context.stroke();
return(this);
}
var sound = new Audio("C.wav");
sound.preload = 'auto';
sound.load();
function playSound(volume) {
var click=sound.cloneNode();
click.volume=volume;
click.play();
}
Here's one way you can do it.. Include a button to trigger the playSound() method. In the playSound() method you can also call your C() method to draw the shape.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onClick="playSound(1)">Play sound</button>
<canvas id="myCanvas" width="850" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var C = (function() {
context.beginPath();
context.moveTo(20, 20);
context.lineTo(60, 20);
context.moveTo(20, 20);
context.lineTo(20, 230);
context.moveTo(60, 20);
context.lineTo(60, 160);
context.moveTo(60, 160);
context.lineTo(75, 160);
context.moveTo(75, 160);
context.lineTo(75, 230);
context.moveTo(75, 230);
context.lineTo(20, 230);
context.stroke();
return (this);
});
var sound = new Audio("C.wav");
sound.preload = 'auto';
sound.load();
function playSound(volume) {
C();
var click = sound.cloneNode();
click.volume = volume;
click.play();
}
</script>
</body>
</html>
Related
I have crop the partial canvas drawing and move to top left corner. I tried with translate, settransmation, but no luck. translate works before clip, but after clip, translate not moves clipped region. could not find sample code any forum
<html>
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(100, 100, 150, 100)
ctx.setTransform(1,0.5, -0.2, 1, 60, 10);
ctx.fillStyle = "blue";
ctx.fillRect(100, 100, 150, 100);
ctx.beginPath();
ctx.rect(100, 100, canvas.width,canvas.height);
ctx.clip();
ctx.setTransform(1,0.5, -0.2, 1, 60, 10);
ctx.translate(-100,-100);
</script>
</body>
</html>
Could someone guide me to fix this code?
I am trying to draw something very basic to my canvas but its not drawing anything neither showing any errors to fix. what could be the issue here ?
Here's my code :
I also tried moving the js code to an external js file but did't work.
<body>
<canvas
id="myCanvas"
width="800"
height="500"
style="border:1px solid #474747;"
></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect = (10, 100, 15, 400);
</script>
Your issue is with:
ctx.fillRect = (10, 100, 15, 400);
.fillRect() is a method which takes a x, y, width, height as it parameters, so you need to call it like so:
ctx.fillRect(10, 100, 15, 400);
See example below:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 100, 15, 400);
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #474747;"></canvas>
ctx.fillRect = (10, 100, 15, 400); <-- fillRect() is a function, you're using it as an expression.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 100, 15, 400);
<canvas
id="myCanvas"
width="800"
height="500"
style="border:1px solid #474747;"
></canvas>
I am trying to make to objects move towards each other in Canvas, when they meet and overlap one should then disappear and the other should fall down. Now I got the animation to do that, but one of the items is flickering.
<!DOCTYPE html>
<html>
<head>
<style>
canvas{border:#666 3px solid;}
</style>
</head>
<body onload="draw(530,15); draw1(1,15);">
<canvas id="canvas" width="600" height="400"></canvas>
<script>
function draw(x,y){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(x, y, 600, 400);
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect (x, y, 70, 50);
ctx.restore();
x -= 0.5;
if(x==300)
{
return;
};
var loopTimer = setTimeout('draw('+x+','+y+')',5);
};
function draw1(w,e){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.clearRect(w-1,e-2,600,400);
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect (w, e, 70, 50);
ctx.restore();
w += 1;
if(w==265)
{
w -= 1;
e +=2;
};
var loopTimer = setTimeout('draw1('+w+','+e+')',10);
};
</script>
</body>
</html>
Been trying for two days, but can't seem to fix it properly. Thanks in advance.
You are rendering too many frames per second forcing the browser to present frames. Each time a draw function returns the browser presumes you want to present the frame to the page.
Animations need to be synced to the display refresh rate which for most devices is 60FPS. To do this you have one render loop that handles all the animation. You call this function via requestAnimationFrame (RAF) which ensures that the animation stays in sync with the display hardware and browser rendering.
<!DOCTYPE html>
<html>
<head>
<style>
canvas{border:#666 3px solid;}
</style>
</head>
<!-- dont need this <body onload="draw(530,15); draw1(1,15);">-->
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var canvas,ctx,x,y,w,e;
var canvas,ctx,x,y,w,e;
function draw() {
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect(x, y, 70, 50);
};
function draw1(w, e) {
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect(w, e, 70, 50);
};
function update(time){ // high precision time passed by RAF when it calls this function
ctx.clearRect(0,0,canvas.width,canvas.height); // clear all of the canvas
if(w + 70 >= x){
e += 2;
}else{
x -= 0.75;
w += 1;
};
draw(x,y);
draw1(w,e);
requestAnimationFrame(update)
// at this point the function exits and the browser presents
// the canvas bitmap for display
}
function start(){ // set up
x = 530;
y = 15;
w = 1;
e = 15;
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
requestAnimationFrame(update)
}
window.addEventListener("load",start);
</script>
</body>
</html>
You're method of animation is very outdated (ie, the use of setTimeout). Instead you should be using requestAnimationFrame as demonstrated below. This will give smooth, flicker free animation.
<!DOCTYPE html>
<html>
<head>
<style>
canvas{border:#666 3px solid;}
</style>
</head>
<body onload="requestAnimationFrame(animate);">
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 530, y = 15;
function animate(){
requestID = requestAnimationFrame(animate);
ctx.clearRect(x, y, 600, 400);
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect (x, y, 70, 50);
x -= 0.5;
if(x==300)
{
cancelAnimationFrame(requestID)
};
}
</script>
</body>
</html>
the first 2 parameters of ctx.clearReact in both draw functions should be 0:
ctx.clearRect(0, 0, 600, 400);
This means you clear all canvas.
I am working in Jquery.
I have 4 Cordinates , Width, Height, x Position and Y position.
How can i create a Square shape Using This
$('#box').drawRect(20,20,2,30,{color:'red'})
I tried this and Not Working. Looking for a Good Hand
Here is My Demo. http://fiddle.jshell.net/vbm2vhu4/
try using canvas tag in JavaScript..
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
JSFIDDLE
JAVASCRIPT
Draw a circle
$(document).ready(function(){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
});
Drawing a rectangle requires canvas. You really do not need to use jquery for it. It can be well done with Javascript. I am attaching my example here.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150">
Browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 50, 50);
ctx.stroke();
</script>
</body>
</html>
Paste this into a notepad and save as .html and load it in your browser
or jsfiddle http://jsfiddle.net/ssbiswal1987/vsbak0mq/
i have the following code in an html file and when i try to view the code on localhost [MAMP] all i see is a black canvas area with a border around it. i've checked it in chrome and firefox. same results. what am i doing wrong?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000;"></canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function() {
var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);
//close jquery
});
</script>
</body>
so i figured it out. thanks to Ken and Scott for their help.
var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 100);
should have been
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d"); //should have been myCanvas not canvas
ctx.fillRect(50, 50, 100, 100);
The default fill style of the canvas is black, while the canvas itself starts out as transparent. Set it to something else before calling fillRect, and you'll see better results.
ctx.fillStyle = "#F00"
Or, try this to see multiple rectangles:
var myCanvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
FIDDLE