ant't 'putImageData' with 'imagedata' from other canvas - javascript

I have two canvases on the same page, with different ids. I use the first canvas to draw Images and the second is like an album where you can see all of your paintings...... When I use var Img = painter.getImageData(0, 0, 100, 100) and album.putImageData(Img, 0, 0) it doesn't work. Plz help!
Code : (there may be some errors, because this is hand written write now, my original code is too long)
HTML :
<html>
<body>
<canvas id="album" width="1000" height="1000"></canvas>
<canvas id="painter" width="100" height="100" onclick="draw(event)"></canvas>
<button onclick="sub()">Submit to album</button>
</body>
</html>
JS :
var album = document.getElementById("ambum").getContext("2d");
var painter = document.getElementById("painter").getContext("2d");
var SRC = "";
function draw(evt) {
var X = evt.clientX;
var Y = evt.clientY;
painter.beginpath();
painter.fillStyle = "red";
painter.fillRect(X - 1000, Y, 100, 100);
}
function sub() {
var SRC = painter.getImageData(1000, 0, 100, 100);
album.beginPath();
album.putImageData(SRC, 0, 0);
}

Related

How can I control the RGB of my canvas so that the Red and Green part of the gradient is the position of my mouse position divided by two?

My HW instruction specifically calls for this: RGB where red is 0, green is the x-coordinate divided by 2, and blue is the y-coordinate divided by two. So far, my big canvas' colors are controlled by addColorStop functions but I'm not sure how to get the colors to change and how it should change. Any help is appreciated as I have been stuck on this for 2 days. Thanks.
<!DOCTYPE html>
<html>
<body>
<canvas id="big" onclick="myFiller(event);"; width="512" height="512"style="border: solid #000000;"></canvas>
<canvas id="small" width="100" height="100" style="background-color: #FF0000"></canvas>
<p id="para"></p>
<script>
// add eventListener
var c = document.getElementById("big");
var ctx = c.getContext("2d");
var rgbCanvas = ctx.createLinearGradient(c.width, c.height, 120,120);
rgbCanvas.addColorStop(0, "red");
rgbCanvas.addColorStop(0.5 ,"green");
rgbCanvas.addColorStop(1, "blue");
ctx.fillStyle = rgbCanvas;
ctx.fillRect(0,0, 512, 512);
var s = document.getElementById("small");
var stx = s.getContext("2d");
function myFiller(event) {
console.log("running");
// document.getElementById("big").innerHTML = style
// console.log(cData);
var x = event.offsetX;
var y = event.offsetY;
var pixelContainer = ctx.getImageData(x, y, 1, 1).data; //pixelContainer grabs the context of "big" canvas but only one pixel worth
console.log(pixelContainer); //just to see if pixelContainer is working
console.log(pixelContainer[0],pixelContainer[1],pixelContainer[2],pixelContainer[3])
//understand what this is later
document.getElementById("big").innerHTML = "(" + pixelContainer[0] + " " + ")";
var red = (pixelContainer[0]).toString(16);
var green = (pixelContainer[1]).toString(16);
var blue = (pixelContainer[2]).toString(16);
document.getElementById("para").innerHTML = "#"+ red+green+blue;
}
</script>
</body>
</html>
This is a straightforward way to have the background color of the canvas change on mousemove
rif: mousemove MDN
document.querySelector('canvas').addEventListener('mousemove', evt =>
evt.target.style.backgroundColor = `rgb(${evt.offsetX / 2}, ${evt.offsetY / 2}, 0)`
)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<canvas width="512" height="512"></canvas>
</body>
</html>

how to hide dynamically created canvas objects after reaching the end of the screen

I've created HTML5 canvas objects dynamically, by cloning them at a set interval of time. Now, I need to make each of them disappear after they reach the end of the screen. This is the code I've used to create the canvas objects.
HTML code
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<br><br>
<script src="myjs1.js"></script>
<canvas id="test" class="test"></canvas>
</body>
</html>
MYJS1.JS file
$(document).ready(function(){
var c = document.getElementById("test");
var ctx=c.getContext("2d");
var h=ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
ctx.fillRect(20, 20, 150, 100);
ctx.font="30px Arial";
ctx.fillText(0,250,75);
ctx.stroke();
setInterval(function() {
var el = $("#test"),
newone = el.clone(true);
el.before(newone);
},5000);
var i=0;
setInterval(function() {
i++;
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
ctx2.fillRect(20, 20, 150, 100);
ctx2.font="30px Arial";
ctx2.fillText(i,250,75 );
ctx2.stroke();
},5000);
});
If I use the following code, it's stopping the blocks from being created after the given condition, not making the first created block disappear.
if(i>10){
$('#test:first').remove();
}
'#test:last' also gives the same result.
Can someone please help me out.

HTML to run JS image transform function

cutImageUp is a js script that's already been discussed in SE, here Shattering image using canvas. But I have a different question about using it. The html I try doesn't do anything. I'm sure that I've done a simple wrong, but I'm too much of a noob to see it.
The cutImageUp script:
<script type="text/javascript">
var image = new Image();
image.src = "letere.png"; image.onload = cutImageUp;
var imagePieces = [];
function cutImageUp() {
for(var x = 0; x < 5; x++) {
for(var y = 0; y < 5; y++) {
var canvas = document.createElement('canvas');
canvas.width = 50;
canvas.height = 50;
var context = canvas.getContext('2d');
context.drawImage(image, x *50, y * 50, 50, 50, 0, 0, 50, 50);
imagePieces.push(canvas.toDataURL());
}
}
var anImageElement = document.getElementById('img');
anImageElement.src = imagePieces[0];
}
</script>
My html:
<html>
<head>
<script src="cutImageUp.js"></script>
</head>
<body>
<img src="letere.png" onload="cutImageUp()" width="50" height="50">
</img>
</body>
</html>
When I run the page, the image appears, without the function applied. I might as well run the page without js. BTW, the files are in the same folder, and I tried using Base64, no luck.
Remove the <script> tags around the JavaScript code in cutImageUp.js. You only need those when you embed JS code in an HTML file.

Moving image in a circular path purely using JavaScript

How can I make the imageObject to move in a circular path? Or more specific, what are the mathematical formulas needed to make it do so?
I am required to use setInterval with a function that caluclates the new coordinates of the picture. setInterval is supposed to call the function at least 20 times a second.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Graphics and animation using HTML5 Canvas</title>
<style>
#the-canvas { border: 1px dashed gray }
</style>
<script>
addEventListener('load', function() {
var x = document.getElementById("the-canvas");
var y = x.getContext("2d");
var imageObject = new Image();
imageObject.onload = function() {
y.drawImage(imageObject, 100, 200);
};
imageObject.src = "image.jpg";
});
</script>
</head>
<body>
<canvas id="the-canvas" width="500" height="400">
Your browser does not support the <canvas> element.
</canvas>
</body>
</html>
Mathematical formulas needed would be cosine in one dimension and sine in the other.
Something like this:
addEventListener('load', function() {
var x = document.getElementById("the-canvas");
var y = x.getContext("2d");
var imageObject = new Image();
var step = 0, radius = 50, speed = 0.05;
function spin() {
y.clearRect(0, 0, x.width, x.height);
y.drawImage(imageObject, 100 + radius * Math.cos(speed * step), 200 + radius * Math.sin(speed * step));
++step;
}
imageObject.onload = function() {
y.drawImage(imageObject, 100, 200);
setInterval(spin, 50); // 20 fps
};
imageObject.src = "image.jpg";
});

Javascript canvas animating

I want to make a loading bar for my web application and I want to use a html canvas for this. This is the script that I use to fill up the canvas:
<script>
var canvas = document.getElementById("bar");
var c = canvas.getContext("2d");
var xPos = 0;
draw = function() {
if(xPos < 300){
c.rect(0, 0, xPos, 30);
c.fill(255,0,0);
xPos += 0.5;
}
};
</script>
I tested this code on a online code converter (khan academy) and it worked (of course without the first 2 lines and c. in front of most things), and that is also my trouble I don't know where I have to put c. in front of?
I simplified the page a little bit:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<canvas id="bar"></canvas>
<script>
var canvas = document.getElementById("bar");
var c = canvas.getContext("2d");
c.fillStyle = "#ff0000"
draw = function(){
if(xPos < 300){
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
}
};
</script>
</body>
</html>
Whatever you are trying to draw... this:
draw = function(){
if(xPos < 300) {
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
}
};
... it is a definition of variable in global context (context of window object), then assigning a function to it. That's all - it only defines the behavior.
What you need also needs to execute that (a sidenote: to execute it after the canvas is actually created - when you put code in a script tag after canvas tag - it's sufficient and you did it already).
To execute the function use:
draw();
Or don't wrap code in function at all (unless it's to be called multiple times).
Or use a syntax construct to execute the function created in place like this:
(draw = function(){
if(xPos < 300) {
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
setTimeout(draw,15); // use this to achieve animation effect
}
})();
var xPos = 0;
var canvas = document.getElementById("bar");
var c = canvas.getContext("2d");
c.fillStyle = "#FF0000";
var draw;
(draw = function(){
if(xPos < 300) {
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
setTimeout(draw,15);
}
})();
#bar {
width: 300px;
height: 50px;
}
<canvas id="bar"></canvas>
Edit: I've been thinking of what you might need, as it's not entirely abvious what you want. I have created this jsfiddle. Maybe it'll be of any help.
Hmmm...
You got some things mixed up. Try this:
<html>
<canvas id = "cvs1" width = "300" height = "30"></canvas>
</html>
And for the script:
var c = document.getElementById("cvs1").getContext("2d");
c.fillStyle = "#ff0000" //Set Fill Color(Set to red)
if(xPos < 300){
c.fillRect(xPos, 0, 30, 30);
xPos += 0.5;
}
If not:
What you did was use fill and rect seperately. You need to set the color, and then use the fillRect() function to draw the rectangle.
EDIT: You got the x,y,width,height as width,height,x,y. Fixed answer.
Good luck!
You need to call draw for every animation step. You could do this using setTimeout, setInterval or requestAnimationFrame :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<canvas id="bar"></canvas>
<script>
var canvas = document.getElementById("bar");
var c = canvas.getContext("2d");
c.fillStyle = "#ff0000";
xPos=0;
draw = function(){
if(xPos < 300){
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
requestAnimationFrame(draw);
}
};
requestAnimationFrame(draw);
</script>
</body>
</html>

Categories

Resources