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>
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 want to move lineTo points.
How to do it?
I'm new to Canvas.
I'll give an example with Path.
This is my example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
var line = ctx.lineTo(300, 100);
ctx.lineTo(70, 100);
ctx.lineTo(20, 20);
ctx.fillStyle = "red";
ctx.fill();
setTimeout(function() {
/*
I want something like this:
line.editpoints(300, 150);
*/
}, 3000);
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
Well, canvas as the name suggests, is a canvas (just like in paintings). You can draw on it, but you cannot move things on it as it is not "dynamic".
What you can do, though, is clear it and then draw on top at a different location.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function clearContext(ctx) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawTriangle(offsetX = 0, offsetY = 0) {
ctx.beginPath();
ctx.moveTo(offsetX + 20, offsetY + 20);
var line = ctx.lineTo(offsetX + 300, offsetY + 100);
ctx.lineTo(offsetX + 70, offsetY + 100);
ctx.lineTo(offsetX + 20, offsetY + 20);
ctx.fillStyle = "red";
ctx.fill();
}
drawTriangle();
setTimeout(function() {
clearContext(ctx);
drawTriangle(50, 50);
}, 3000);
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;"></canvas>
I want to remove the intersection of two shapes, I understand that to do this I can use the XOR operation. the problem is that I need these two shapes to be transparent. By making the two shapes transparent the intersection is not eliminated.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" 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 = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.fillStyle = "blue";
ctx.globalCompositeOperation = "xor";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(150, 20, 75, 50);
ctx.fillStyle = "rgba(40,23,0,0.5)";
ctx.globalCompositeOperation = "xor";
ctx.fillRect(180, 50, 75, 50);
</script>
</body>
</html>
Note: In the real problem it is not possible for me to generate an image, as proposed here
A simple (possibly simplistic, but it works) way of clearing pixels in overlapping images is to draw each image on its own canvas as well as on the main canvas.
We can then go through the main canvas pixel by pixel clearing any pixel which is in both images, even if it has only very slight opacity.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.fillRect(150, 20, 75, 50);
ctx.fillStyle = "rgba(40,23,0,0.5)";
ctx.globalCompositeOperation = "xor";
ctx.fillRect(180, 50, 75, 50);
var c1 = document.createElement('canvas');
var ctx1 = c1.getContext("2d");
ctx1.fillStyle = "rgba(255,0,0,0.5)";
ctx1.fillRect(150, 20, 75, 50);
var c2 = document.createElement('canvas');
var ctx2 = c2.getContext("2d");
ctx2.fillStyle = "rgba(40,23,0,0.5)";
ctx2.fillRect(180, 50, 75, 50);
let imgData = ctx.getImageData(0, 0, 300, 150);
for (let i=0; i < 300; i++) {
for (let j = 0; j < 150; j++) {
//clear the pixel if both images have opacity>0 there
if (ctx1.getImageData(i, j, 1, 1).data[3] && ctx2.getImageData(i, j, 1, 1).data[3] ) {
ctx.clearRect(i, j, 1, 1);
}
}
}
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
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>
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/