This is my JS code, I would realy appreciate if someone would help me, because this code is not even running and I don't know why.
<canvas id="Canvas1" width="400" height="100"></canvas>
<script>
var can = document.getElementById('Canvas1');
var ctx = can.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(100, 100, 250, 100);
</script>
<canvas id="Canvas1" width="400" height="100" style="border:1px solid #000000;"></canvas>
<script>
var can = document.getElementById('Canvas1');
var ctx = can.getContext('2d');
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 150, 50);
</script>
You missed border in canvas so u was not seeing o/p
and also you starting fillRect at 100(height) that is your end point of rect so u are not able to see the result.
Remember
ctx.fillRect(p1, p2 ,p3 , p4);
p1 = Start point X
p2 = Start point Y
p3 = width of your rectangle that should be less than or equal to Canvas width.
p4 = Height of your rectangle that should be less than or equal to Canvas height.
Related
<!DOCTYPE html>
<html>
<head>
<title>Compositing Canvas</title>
</head>
<body>
<canvas id="canvas1" width="200" height="200" style="border: 1px solid"></canvas> <br>
<button onclick="composite()">Composite</button> <br>
<p>Result Should be : </p>
<canvas id="canvas2" width="200" height="200" style="border: 1px solid"></canvas>
<script type="text/javascript">
// 1st Canvas
let canvas1 = document.getElementById('canvas1');
let ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = "red";
ctx1.fillRect(10, 10, 100, 100);
// globalCompositeOperation = "source-over|source-atop|source-in|source-out|destination-over|destination-atop|destination-in|destination-out|lighter|copy|xor"
function composite() {
ctx1.globalCompositeOperation = "source-atop";
};
ctx1.fillStyle = "blue";
ctx1.arc(110, 110, 80, 0 * Math.PI, 2 * Math.PI);
ctx1.fill();
// 2nd Canvas
let canvas2 = document.getElementById('canvas2');
let ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 100, 100);
ctx2.globalCompositeOperation = "source-atop";
ctx2.fillStyle = "blue";
ctx2.arc(110, 110, 80, 0 * Math.PI, 2 * Math.PI);
ctx2.fill();
</script>
<br/>
</body>
</html>
After clicking the button, the globalCompositeOperation is not working...how can i do that for the expected answer?
the expected answer is in the second Canvas or second image...
why it is not working...?
Let me cite the following paragraph out of Compositing and clipping over at developer.mozilla.org:
globalCompositeOperation = type
This sets the type of compositing operation to apply when drawing new shapes, where type is a string identifying which of the twelve
compositing operations to use.
The key here is: '...when drawing new shapes...'
So changing the composite operation for your canvas as the last command in the drawing chain doesn't affect shapes drawn priorly.
I have this code to draw a Bezier curve:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(30, 100, 200, 100, 200, 200);
ctx.stroke();
<canvas id="myCanvas" width="300" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
This code results in a S shaped Beizer curve:
My problem is that I want to change the start and end control points as per my wish but at the same time I want that S shape to be there.
I have observed whenever I change the control points, the overall shape of the curve becomes strange.
What is the way out?
If the S shape is currently displayed as you wish, then the middle control points are such that their X-coordinate roughly matches the X-coordinate of the end point they are closest to, and the Y-coordinate is the same for both middle control points: it is about half-way the Y range of the end points.
So you can calculate the control points dynamically if you only have the two end points:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawS(start, end) {
ctx.beginPath();
ctx.moveTo(...start);
let midY = (start[1] + end[1]) / 2;
ctx.bezierCurveTo(start[0], midY, end[0], midY, ...end);
ctx.stroke();
}
drawS([20, 20], [200, 180]);
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"></canvas>
I am trying to make a canvas with a black square and a moving white circle but it is not working and i dont know why here is the issue it is just an empty webpage when i try to open it. I have saved and evreything. i really need help! here is the code
<html>
<head>
<title>paddle</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas
var canvasContext
var ballX = 5
window.onload = function() {
var fps = 30;
setInterval(updateAll, 1000)
canvas = document.getElementById("myCanvas");
canvasContext = canvas.getContext("2d")
}
function updateAll() {
ballX++
canvasContext.fillStyle = "black"
canvasContext.fillRect(0, 0, canvas.width, canvas.height)
canvasContext.fillStyle = "white";
canvasContext.beginPath()
canvasContext.arc(ballX, 100, 10, 0, Math.PI*2 true);
}
</script>
</body>
</html>
You're missing a comma before the last argument here (between Math.PI*2 and true):
canvasContext.arc(ballX, 100, 10, 0, Math.PI*2 true);
Hello I wanted to know if anyone can provide tips or direction on an issue i'm having with a triangle animation. I have a partial animation that is not continuous, it jitters at the end of the animation. I'm looking for advise how to make a full rotation. If anyone can also assist in how to add multiple rotations that would be amazing.
Thank you ..
<!DOCTYPE html>
<html>
<head>
<title>Triangle Animation Team B</title>
</head>
<body>
<canvas id="canvas" width="900" height="600"></canvas>
<script>
function makeTriangle(x1,y1,x2,y2,x3,y3) {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var Array = ['red','green', 'black'];
var color = Array[Math.floor(Math.random() * 3)];
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.lineTo(x1,y1);
ctx.fillStyle = color;
ctx.fill();
}
}
makeTriangle('400','38','465','76','200','400');
var x = 200;
window.setInterval( function() {
var context = document.getElementById('canvas').getContext('2d');
context.clearRect(0, 0, 1000, 500, 0);
x++;
if (x > 500) x = 300;
makeTriangle('400','38',x,'76','400','200');
}, 20);
</script>
</body>
</html>
I am trying to figure out how one can detect if the user's mouse hits a line on an HTML 5 canvas with jQuery.
Here is the code that generates the canvas lines:
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(40,0);
ctx.lineTo(40,360);
ctx.stroke();
ctx.moveTo(80,400);
ctx.lineTo(80,40);
ctx.stroke();
ctx.moveTo(120,0);
ctx.lineTo(120,360);
ctx.stroke();
ctx.moveTo(160,400);
ctx.lineTo(160,40);
ctx.stroke();
};
</script>
I'm using a modified jQuery script that I actually found in another question on here, but now I can't figure out how to detect the line, mainly the difference in color from white to black, in the canvas. I know that this can be done with images, but I haven't seen anyone with something like this.
I guess my real question is, is there a way to detect color changes on a canvas element with jQuery?
Its possible to do with javascript. In fact you aren't using any jQuery in your example above. An easy way to do it is by grabbing the pixel data from the canvas, and checking the alpha at the specified x and y position. If the alpha isn't set to 0, then you have something drawn on the canvas. Below is a function I put together real quick that does that.
Live Demo
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
width = 400;
height = 400;
canvas.width = canvas.height = 200;
// draw
ctx.moveTo(40, 0);
ctx.lineTo(40, 360);
ctx.stroke();
ctx.moveTo(80, 400);
ctx.lineTo(80, 40);
ctx.stroke();
ctx.moveTo(120, 0);
ctx.lineTo(120, 360);
ctx.stroke();
ctx.moveTo(160, 400);
ctx.lineTo(160, 40);
ctx.stroke();
function detectLine(x, y) {
var imageData = ctx.getImageData(0, 0, width, height),
inputData = imageData.data,
pData = (~~x + (~~y * width)) * 4;
if (inputData[pData + 3]) {
return true;
}
return false;
}
canvas.addEventListener("mousemove", function(e){
var x = e.pageX,
y = e.pageY;
console.log(detectLine(x, y));
});
console.log(detectLine(40, 100));
console.log(detectLine(200, 200));