This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 5 years ago.
I have a set of coordinates and for every pair I'd like to place a SVG on the canvas. The problem is in getCircle function. The SVG doesn't work, but if I draw a circle(see commented code) it works.
function getCircle() {
var circle = document.createElement("canvas"),
ctx = circle.getContext("2d"),
r2 = radius + blur;
circle.width = circle.height = r2 * 2;
/*
ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
ctx.shadowBlur = blur;
ctx.shadowColor = "purple";
ctx.beginPath();
ctx.arc(-r2, -r2, radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
*/
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "https://upload.wikimedia.org/wikipedia/en/0/09/Circle_Logo.svg";
return circle;
}
var radius = 5;
var blur = 1;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 200;
var circle = getCircle();
ctx.clearRect(0, 0, canvas.width, canvas.height);
var data = [[38,20,2]];
for (var i = 0, len = data.length, p; i < len; i++) {
p = data[i];
ctx.drawImage(circle, p[0] - radius, p[1] - radius);
}
#c {
width: 400px;
height: 200px;
}
<canvas id="c"></canvas>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 200;
var data = [[0,20,2],[125,20,2],[250,20,2]];
drawImage();
function drawImage() {
var img = new Image();
img.onload = function() {
for (var i = 0, len = data.length, p; i < len; i++) {
p = data[i];
ctx.drawImage(this, p[0] , p[1] , 150, 150);
}
};
img.src = "https://upload.wikimedia.org/wikipedia/en/0/09/Circle_Logo.svg";
}
#c {
width: 400px;
height: 200px;
}
<canvas id="c"></canvas>
in img.onload() draw your image in specified position with widht and height using drawImage().
Related
Pretty new to JavaScript.
I'm building a site that compares the template image with the user's input and builds some image processing directives. The template image is stored in the site's folder.
$(function() {
$("#btnDirective").click(generateEmoteDirectiveFile);
});
function generateEmoteDirectiveFile() {
getImageData('imgs/templates/human.png');
}
function getImageData(source) {
var image = new Image();
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
for (var px = 0, cx = canvas.width * canvas.height * 4; px < cx; px += 4)
if (data[px+3] != 255 && data[px+3] != 0)
console.log("Alpha: " + data[px+3]);
};
image.src = source;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<button id="btnDirective">Generate</button>
</body>
</html>
'imgs/templates/human.png' contains a lot of semitransparent values, that are never fetched:
So you are trying to get the integer values for each pixel where it's alpha value of neither 0 nor 255?
Well, your image has pixels that are either full transparent, or they are solid white/black. So you will have no partially-transparent pixels.
See the image of the chili pepper emoji from Emojipedia that is used below. Around ~6% of its pixels are partially transparent (around the borders).
$(function() {
$('#btnDirective').click(generateEmoteDirectiveFile);
});
function generateEmoteDirectiveFile() {
getImageData('https://i.imgur.com/4LzuX3G.png');
getImageData('https://i.imgur.com/R7g697w.png'); // Using a testable image
}
function getImageData(source) {
var image = new Image();
image.crossOrigin = 'Anonymous'; // This allows Imgur CORS...
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
document.body.appendChild(canvas); // Add canvas to body...
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
var pixels = canvas.width * canvas.height;
var alphaValues = [];
for (var px = 0, cx = pixels * 4; px < cx; px += 4) {
if (data[px + 3] != 255 && data[px + 3] != 0) {
alphaValues.push(data[px + 3]);
}
}
var nonAlphaPixels = (alphaValues.length / pixels * 100).toFixed(2);
console.log('Alpha (' + nonAlphaPixels + '%): ' + alphaValues.join(','));
};
image.src = source;
}
function drawPartialPixels(imageData) {
}
body { background: #444; }
#btnDirective { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnDirective">Generate</button>
Here is an example of drawing only the partial pixels.
$(function() {
$('#btnDirective').click(generateEmoteDirectiveFile);
});
function generateEmoteDirectiveFile() {
getImageData('https://i.imgur.com/R7g697w.png', onImageLoad);
}
function getImageData(source, onLoadFn) {
var image = new Image();
image.src = source;
image.crossOrigin = 'Anonymous'; // This allows Imgur CORS...
image.onload = function() {
onLoadFn(this);
};
}
function onImageLoad(image) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = canvas.width * canvas.height;
for (var px = 0, cx = pixels * 4; px < cx; px += 4) {
var partialAlpha = imageData.data[px + 3] != 255 && imageData.data[px + 3] != 0;
imageData.data[px + 0] = partialAlpha ? 255 : 0;
imageData.data[px + 1] = partialAlpha ? 0 : 0;
imageData.data[px + 2] = partialAlpha ? 0 : 0;
imageData.data[px + 3] = partialAlpha ? 255 : 0;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);
document.body.appendChild(canvas); // Add canvas to body...
}
body { background: #444; }
#btnDirective { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnDirective">Generate</button>
I'm trying to create background for every created particle.
Canvas pattern is not working properly. I'm getting this error >> "SyntaxError: An invalid or illegal string was specified"
HTML
<canvas id="canvas"></canvas>
JS
(function(){
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'),
particles = {},
particleIndex = 0,
particleNum = 1;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.width);
function Particle(){
this.x = canvas.width / 2;
this.y = 0;
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.gravity = 0.2;
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.test = 0;
this.maxLife = 100;
}
Particle.prototype.draw = function(){
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
this.test++;
if ( this.test >= this.maxLife ) {
delete particles[this.id];
};
var img = new Image();
img.src = 'img/aaa.png';
var pattern = ctx.createPattern(img,'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(this.x, this.y, 20, 20);
};
setInterval(function(){
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particleNum; i++) {
new Particle();
};
for(var i in particles) {
particles[i].draw();
}
},30)
}})();
I was trying to do this also with ctx.drawImage(), but picture was displayed one time only.
Any tips?:)
Fiddle
I think the issue is the image being loaded later than its used.
Inside your draw() you have:
var img = new Image();
img.src = 'img/aaa.png';
var pattern = ctx.createPattern(img,20,20);
It is a bad idea to create new images everytime you want to draw. I strongly suggest you create the img variable outside of the draw loop. Once you set the .src of an image, you have to wait until it is loaded to use it. There is an onload event you can use to let you know when its ready.
Here is an example:
var imgLoaded = false;
var img = new Image();
img.src = 'img/aaa.png';
img.onload = function() { imgLoaded = true; };
function draw() {
...
if (imgLoaded) {
var pattern = ctx.createPattern(img, 'repeat');
...
}
...
}
This works great on all of my tests, but on the live system, I have a problem.
There are three separate but identical canvases. They are all initially painted with 640x480 jpg images. The third is then updated every second with a new 640x480 jpg image.
For some reason, the original static image for the third canvas - and that canvas only - doesn't load from the live server, only on the tests.
Here's the html:
<div style="padding: 1vw;">
<a href="/virtualscribe" class="camLink">
<div class="camDiv">
<div class="camBox" id="picBoxLeft">
<canvas id="canvasLeft" class="camBorder"></canvas>
</div>
</div>
</a>
<a href="/videos" class="camLink">
<div class="camDiv">
<div class="camBox" id="picBoxCenter">
<canvas id="canvasCenter" class="camBorder"></canvas>
</div>
</div>
</a>
<div class="camDiv">
<div class="camBox" id="picBoxRight">
<canvas id="canvasRight" class="camBorder"></canvas>
</div>
</div>
</div>
Here's the CSS:
<style>
.camBox {
max-width: 28vw;
width: 28vw;
height: 21vw;
max-height: 21vw;
display: inline-block;
}
.camDiv {
padding: 1.5vw;
display: inline-block;
}
.camBorder {
border: 0.6vw solid #fe890f;
border-top-left-radius: 3.3vw;
border-bottom-right-radius: 3.3vw;
}
.camLink {
color: transparent;
}
</style>
And here's the JavaScript:
var refreshTimer;
var imgLiveCam;
function drawPictureBox(img, canvas, text) {
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0, canvas.width, canvas.height);
context.globalAlpha = 0.6;
context.fillStyle = "rgb(244,121,32)";
context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33);
context.globalAlpha = 1;
var maxWidth = canvas.width;
var x = canvas.width / 2;
var y = canvas.height * 0.85;
context.font = canvas.width / 12 + 'px Oswald';
context.strokeStyle = 'black';
context.lineWidth = 2;
context.textAlign = "center";
context.strokeText(text, x, y, maxWidth);
context.fillStyle = 'white';
context.fillText(text, x, y, maxWidth);
};
function drawCamBox(img, logo, canvas) {
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0, canvas.width, canvas.height);
context.globalAlpha = 0.6;
context.fillStyle = "rgb(244,121,32)";
context.fillRect(0, canvas.height * 0.67, canvas.width, canvas.height * 0.33);
var eSize = canvas.height / 10;
context.globalAlpha = 1;
context.drawImage(logo, 2, canvas.height * 0.67 - eSize, eSize, eSize);
var now = new Date();
var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
var maxWidth = canvas.width * 0.33;
var x = canvas.width - 10 - maxWidth;
var y = canvas.height * 0.67 - 10;
context.font = maxWidth / 10 + "px Arial";
context.strokeStyle = 'black';
context.lineWidth = 2;
context.strokeText(text, x, y, maxWidth);
context.fillStyle = 'white';
context.fillText(text, x, y, maxWidth);
text = 'View Our Production Floor';
context.textAlign = "center";
maxWidth = canvas.width;
x = canvas.width / 2;
y = canvas.height * 0.85;
context.font = canvas.width / 12 + 'px Oswald';
context.strokeText(text, x, y, maxWidth);
context.fillText(text, x, y, maxWidth);
}
function addResizeListener(fn) {
if (window.attachEvent) {
window.attachEvent('onresize', fn)
} else if (window.addEventListener) {
window.addEventListener('resize', fn, true);
};
}
function initCam() {
var imgLeft = new Image();
imgLeft.onload = function () {
var canvas = document.getElementById("canvasLeft");
var picBox = document.getElementById("picBoxLeft");
var drawFn = function () {
canvas.height = picBox.clientHeight;
canvas.width = picBox.clientWidth;
drawPictureBox(imgLeft, canvas, 'Looking for a Scribe?');
};
drawFn();
addResizeListener(drawFn);
}
var imgCenter = new Image();
imgCenter.onload = function () {
var canvas = document.getElementById("canvasCenter");
var picBox = document.getElementById("picBoxCenter");
var drawFn = function () {
canvas.height = picBox.clientHeight;
canvas.width = picBox.clientWidth;
drawPictureBox(imgCenter, canvas, 'Watch In-Depth Videos');
};
drawFn();
addResizeListener(drawFn);
}
imgLiveCam = new Image();
var logo = new Image();
logo.src = "e.png";
imgLiveCam.onload = function () {
var canvas = document.getElementById("canvasRight");
var picBox = document.getElementById("picBoxRight");
var drawFn = function () {
canvas.height = picBox.clientHeight;
canvas.width = picBox.clientWidth;
drawCamBox(imgLiveCam, logo, canvas);
};
drawFn();
imgLiveCam.onload = drawFn;
addResizeListener(drawFn);
}
imgLeft.src = "scribe.jpg";
imgCenter.src = "doc-with-spine.jpg";
imgLiveCam.src = "camloading.jpg";
refreshTimer = setTimeout(refresh, 499);
}
function refresh() {
clearTimeout(refreshTimer);
imgLiveCam.src = "http://cams.edataservices.com/17fcam.jpg?t=" + new Date().getTime();
refreshTimer = setTimeout(refresh, 1009);
}
Any idea why the third canvas starts out blank most of the time?
By adding a longer delay before starting the refresh cycle, the browsers had more time to load the initial, "default" image. I set it at 1500ms, and now it is pretty reliable.
(Thanks for the help...)
Why doesn't clearRect appear to work in this example? I would expect only the last red rectangle to appear. Instead, all ten are painted.
var $c = document.getElementById("c");
var ctx = $c.getContext('2d');
var w = 400;
var h = 400;
$c.style.width = w + 'px';
$c.style.height = h + 'px';
$c.width = w;
$c.height = h;
for (var i = 0; i < 10; ++i) {
ctx.clearRect(0, 0, 400, 400);
ctx.fillStyle = "red";
ctx.rect(i * 10, i * 10, 10, 10);
ctx.fill();
}
<canvas id="c"></canvas>
You need to separate the paths on which the rectangles are drawn so they can be cleared independently. You do this using ctx.beginPath and ctx.closePath.
var $c = document.getElementById("c");
var ctx = $c.getContext('2d');
var w = 400;
var h = 400;
$c.style.width = w + 'px';
$c.style.height = h + 'px';
$c.width = w;
$c.height = h;
ctx.fillStyle = "red";
(function drawRect(i) {
ctx.clearRect(0, 0, 400, 400);
ctx.beginPath();
ctx.rect(i * 10, i * 10, 10, 10);
ctx.closePath();
ctx.fill();
if(i < 10)
setTimeout(function() { drawRect(i + 1); }, 50);
})(0);
<canvas id="c"></canvas>
Note: for fun, and so you can actually see the canvas being cleared, I've modified your code from a loop to a callback based animation.
After splitting up the tileset http://mystikrpg.com/images/all_tiles.png
It still will not draw onto the <canvas> I know it gets put into the tileData[] because it outputs ImageData in the console.log(tileData[1]).
$(document).ready(function () {
var tileWidth, tileHeight
ImageWidth = 736;
ImageHeight = 672;
tileWidth = 32;
tileHeight = 32;
console.log("Client setup...");
canvas = document.getElementById("canvas");
canvas.width = 512;
canvas.height = 352;
context = canvas.getContext("2d");
canvas.tabIndex = 0;
canvas.focus();
console.log("Client focused.");
var imageObj = new Image();
imageObj.src = "./images/all_tiles.png";
imageObj.onload = function() {
context.drawImage(imageObj, ImageWidth, ImageHeight);
var allLoaded = 0;
var tilesX = ImageWidth / tileWidth;
var tilesY = ImageHeight / tileHeight;
var totalTiles = tilesX * tilesY;
for(var i=0; i<tilesY; i++)
{
for(var j=0; j<tilesX; j++)
{
// Store the image data of each tile in the array.
tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
allLoaded++;
}
}
if (allLoaded == totalTiles) {
console.log("All done: " + allLoaded); // 483
console.log(tileData[1]); // > ImageData
startGame();
}
};
});
also
var startGame = function () {
console.log("Trying to paint test tile onto convas...");
try {
context.putImageData(tileData[0], 0, 0);
} catch(e) {
console.log(e);
}
}
When you draw the image to the canvas initially, why are you:
context.drawImage(imageObj, ImageWidth, ImageHeight);
Looks like you may have the parameters confused and are trying to fill the area with ImageWidth, ImageHeight... instead, draw it to 0,0
context.drawImage(imageObj, 0, 0);
Here's your code adjusted a little bit:
var tileData = [];
var tileWidth, tileHeight
var ImageWidth = 736;
var ImageHeight = 672;
var tileWidth = 32;
var tileHeight = 32;
var tilesX;
var tilesY
var totalTiles;
canvas = document.getElementById("canvas");
canvas.width = ImageWidth;
canvas.height = ImageHeight;
context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "all_tiles.png";
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
// draw the image to canvas so you can get the pixels context.drawImage(imageObj, 0, 0);
tilesX = ImageWidth / tileWidth;
tilesY = ImageHeight / tileHeight;
totalTiles = tilesX * tilesY;
for(var i=0; i<tilesY; i++) {
for(var j=0; j<tilesX; j++) {
// Store the image data of each tile in the array.
tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
}
}
// test it...
// blank the canvas and draw tiles back in random positions
context.fillStyle = "rgba(255,255,255,1)";
context.fillRect(0,0,canvas.width, canvas.height);
for ( i = 0; i < 20; i++ ) {
context.putImageData(tileData[ i ], Math.random() * canvas.width, Math.random() * canvas.height );
}
};
There's no need to test 'all loaded' since it's just one image that you're splitting apart.