Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm trying to move my image inside the canvas by changing the axis coordinates, but as they move my image starting to disappear. The Gun class represent the infrastructure component that I want to include in the canvas.
var gun;
var canvas;
function AddGun() {
gun = new Gun(100, 100, "images/gun.png", 0, 100);
}
class Gun {
constructor(width, height, source, x, y) {
canvas = document.getElementById("for-js");
canvas.context = canvas.getContext('2d');
var img = new Image();
img.src = source;
img.onload = function() {
canvas.context.drawImage(img, x, y, width, height);
}
}
}
<body onload="AddGun()">
<div class="game-block">
<canvas id="for-js"></canvas>
</div>
</body>
Though in the provided code I don't see where the image would be dynamically moved. I imagine it's because somewhere your code moves the image outside the canvas boundaries. This would be a likely cause of the image starting to disappear.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I wish there was a horizontal funnel plugin available in the market. I'm not a good js developer but I'm a designer with html/css skills in hand. I have designed similar funnel like below in psd but I couldn't find any plugin to plug in into the html. The funnel links should be dynamically adjusted too. Please suggest me how to build similar kind of funnel with steps title, conversion % on the second row in the funnel columns. I've also created this in css but css doesn't work because the funnel columns should be totally dynamic.
Here's how to draw your horizontal funnel chart for a given set of data using Canvas...
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var height=100;
var baseY=200;
var ascending=35;
var descending=35;
var barheight=50;
var data=[65,14,4,3,3];
filledLineChart(data,height,baseY,descending,ascending,barheight,'gold')
function filledLineChart(data,height,baseY,descending,ascending,barheight,fillcolor){
var stepWidth=canvas.width/(data.length-1);
var maxDataValue=0;
for(var i=0;i<data.length;i++){
if(data[i]>maxDataValue){maxDataValue=data[i];}
}
ctx.beginPath();
ctx.moveTo(0,baseY-height*data[0]/maxDataValue);
for(var i=1;i<data.length;i++){
ctx.lineTo(stepWidth*i,baseY-height*data[i]/maxDataValue);
}
ctx.lineTo(stepWidth*(data.length-1),baseY);
ctx.lineTo(0,baseY);
ctx.fillStyle=fillcolor;
ctx.fill();
ctx.strokeStyle='lightgray';
ctx.strokeRect(0,baseY-height-ascending,canvas.width,height+descending+ascending);
ctx.strokeRect(0,baseY-height,canvas.width,height+descending);
ctx.beginPath();
for(var i=0;i<data.length;i++){
ctx.moveTo(i*stepWidth,baseY-height);
ctx.lineTo(i*stepWidth,baseY);
}
ctx.stroke();
ctx.fillStyle='whitesmoke';
ctx.fillRect(0,baseY-height-ascending-barheight,canvas.width,barheight);
}
<canvas id="canvas" width=300 height=300></canvas>
You can apply all your text like this:
// set a font and set a font color and draw some text
ctx.font='14px verdana';
ctx.fillStyle='black'; // or red or whatever
ctx.fillText('21.5%', 100, 175) // 100,175 are the x,y text position
I leave it to you to apply your various text values for the chart using this simple text method.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Like our avatars: is it possible to create a simple avatar that i can use as placeholder for my users?
and extending that: how far can you go with the art preferences: colors, shape etc.
Link only answers are frowned upon but I think I'll take the risk: There are several libraries for those so called identicons Sampson linked to. The code there is Java (or looks very similar). A pure JavaScript implementation seems to be jdidenticon. You have more possibilities with PHP (you can use e.g.: ImageMagick and similar) but JavaScript is cheaper for your load ;-)
It is possible to create 2D and 3D graphics with javascript and the HTML5 tag canvas
<canvas><canvas>
Inside your javascript code you define what should painted inside your canvas
var context = document.getElementById("canvasId").getContext("2d");
var width = 125; // Triangle Width
var height = 105; // Triangle Height
var padding = 20;
// Draw a path
context.beginPath();
context.moveTo(padding + width/2, padding); // Top Corner
context.lineTo(padding + width, height + padding); // Bottom Right
context.lineTo(padding, height + padding); // Bottom Left
context.closePath();
// Fill the path
context.fillStyle = "#ffc821";
context.fill();
<canvas id="canvasId" width="165" height="145"></canvas>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Is it possible to extract the colors from an image of any type using javascript? i want the percentage of each color in the image as well.
To get the base 64 encoded image data,
function getBase64FromImage(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
return canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "");
}
You'll probably want to have a library process the image data, rather than doing it yourself:
What is the best JavaScript image processing library?
Yes this is possible. You need to load the image on a canvas. Then you can extract the color on each arbitrary x,y coordinate.
You might want to have a look at
http://lokeshdhakar.com/projects/color-thief/
getPixel from HTML Canvas?
How to fetch a remote image to display in a canvas?
How to add image to canvas
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I Want to have an image of a car, and when a user clicks a spot on the car, I drop an x image or a circle image on that spot. I need to save the spot where they clicked so when they come back I display it in the same spot.
What is the best way to do this in html?
Should I use an image with other images overlaid on top of it?
Should I use html5?
Anybody know of any working examples of a similar nature?
Want to use js, html5, etc to make this work on iphone safari (not native app). App is ruby on rails, so I could make use of some server side features, but would prefer to leverage as much in html/css if possible.
You can use a canvas element to do this. The canvas element allow you to draw images and shapes to it.
To store and retrieve clicks you can use Web Storage (localStorage).
For example - load the image and paint it to canvas:
ONLINE DEMO HERE
HTML:
<canvas id="demo" width="500" height="400"></canvas>
JavaScript:
/// get context for canvas, cache dimension
var ctx = demo.getContext('2d'),
w = demo.width,
h = demo.height,
img = new Image(); /// the image we want to load
/// when done go draw existing marks and start listening for clicks
img.onload = function() {
renderMarks();
demo.onclick = function(e) {
/// convert mouse coord relative to canvas
var rect = demo.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
/// store mark
addMark(x, y);
/// redraw everything
renderMarks();
}
}
These are the main functions, this first renders existing marks to canvas on top of the image:
function renderMarks() {
/// re-draw image which also serves to clear canvas
ctx.drawImage(img, 0, 0, w, h);
/// get existing marks from localStorage
var marks = localStorage.getItem('marks'),
i = 0;
/// if any, render them all
if (marks !== null) {
/// localStorage can only store strings
marks = JSON.parse(marks);
/// set color and line width of circle
ctx.strokeStyle = '#f00';
ctx.lineWidth = 3;
/// iterate marks and draw each one
for(;i < marks.length; i++) {
ctx.beginPath();
ctx.arc(marks[i][0], marks[i][1], 30, 0, 2 * Math.PI);
ctx.stroke();
}
}
}
This adds a mark to the collection:
function addMark(x, y) {
/// get existing marks or initialize
var marks = JSON.parse(localStorage.getItem('marks') || '[]');
/// add mark
marks.push([x, y]);
/// update storage
localStorage.setItem('marks', JSON.stringify(marks));
}
(The code can be optimized in various ways but I made it to show the basic principles).
If you now navigate away from the page and come back you will see the marks are rendered again (disclaimer: jsfiddle may or may not give the same page so test locally/in "real" page to be sure).
The circles here can be anything, an image, a different shape and so forth.
To clear the marks simply call:
localStorage.clear();
or if you store other data as well:
localStorage.removeItem('marks');
Well, you can create new images for each spot and when the user click you substitute the original image by the new one. You can do that using CSS or jQuery)
Depending if you are interested in showing areas or the exact x/y coordinates, an image <map> might be of use.
Also check out this stackoverflow question.
I have no working example to show, but I think this qualifies as similar in nature. I am not sure how you'd save the info for recalling state (coming back same session or days/months later?).
I hope this is of some use.
I am making a multiple choice quiz game for canvas, where users upload their own images for multiple choice answers.
When the next question is selected, the variables for the next question are got from a javascript array, including filepath for the image.
The problem I am having with this is that usually on the first quiz attempt, images sometimes do not load in time to be drawn on the canvas. I am trying to improve the performance of the canvas side of the quiz, by ensuring image answers are always drawn.
Help would be greatly appreciated. The code for drawing images on canvas is below.
//else if answer type is image answer
else if(answertype == "image"){
answerbg.src = "./resources/imageaudiovideoanswerbg.png";
eventstate = 'imageaget';
if (answerbg.complete) {
context.drawImage(answerbg, 0, 280);
context.drawImage(imagefilea,75,285);
context.drawImage(imagefileb,375,285);
context.drawImage(imagefilec,75,591);
context.drawImage(imagefiled,375,591);
}
else {
answerbg.onload = function () {
context.drawImage(answerbg, 0, 280);
context.drawImage(imagefilea,75,285);
context.drawImage(imagefileb,375,285);
context.drawImage(imagefilec,75,591);
context.drawImage(imagefiled,375,591);
};
}
}
You have to make sure that the image is loaded before you can draw it on canvas.
So what you would have to do is somthing like:
var image = new Image(); //make a new image object
image.onload = function() { //when the image has loaded...
doStuffWithImage(); //Do somthing with it (draw it on canvas etc.)
}
image.src = '/your/path/image.png'; //set the source (afterwards!)
This is something you have to know if your working with images and canvas.
Also if you have trouble loading all the images make a preLoadAllImagesfromSource(sourceArray) function, where all the images objects are allready preloaded when the main code is executed.
Hope that helped.
Alternatively you can consider embedding the image and/or other resources using BASE64 encoding in the JavaScript or the HTML itself.
http://ejohn.org/blog/embedding-and-encoding-in-javascript/
Of course in your case since it is a user uploaded content, you may have to generate the JavaScript from the uploaded image.