Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
How would I go about making this polygon smaller so it would fit in a 800X300 canvas area?
context.beginPath();
context.moveTo(200,0);
context.lineTo(400,0);
context.lineTo(600,200);
context.lineTo(600,400);
context.lineTo(400,600);
context.lineTo(200,600);
context.lineTo(0,400);
context.lineTo(0,200);
context.closePath();
context.fill();
I cannot seem to figure out what numbers need to be changed.
You could use the scale() method.
context.scale(x, x);
where x is the factor to scale by.
You can either replot your lines, or the quickest way would be to use the scale method on your context like this
context.scale(0.5,0.5);
That would make it half the size, so a full example would be
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.scale(0.5,0.5);
context.beginPath();
context.moveTo(200,0);
context.lineTo(400,0);
context.lineTo(600,200);
context.lineTo(600,400);
context.lineTo(400,600);
context.lineTo(200,600);
context.lineTo(0,400);
context.lineTo(0,200);
context.closePath();
context.fill();
See jsfiddle here http://jsfiddle.net/XLW2P/1/
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 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.
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 2 years ago.
Improve this question
I have a series of lines, curves, and arcs drown randomly on a HTML5 canvas.
There's a rectangle at the left of the line, and the line slides to the left and moves on the y axis in a way that it always passes throw the middle of the rectangle. The problem is that I would like the middle of the right side of the rectangle to be always perpendicular to the line, even when the line curves.
perpendicular rectangle
How can I achieve that?
Thanks
You need calculate the angle of line and set this in rect. Look the review solution in my project:
delta_x = x2 - x1;
delta_y = y2 - y1;
angle = Math.atan2(delta_y, delta_x);
https://codepen.io/Luis4raujo/pen/gOLRqzq?editors=1111
Now, you need adjusting x and y position of rect.
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 8 years ago.
Improve this question
If I have a map in SVG format, how can I scale the image to be say, X times bigger? How would I achieve this? I want to be able to scale it based on an X variable which of course varies
I have looked into it but I am stretched for time. I just want to know where to begin.
To scale SVG data you need to use a scale transformation.
So to make an element, e.g 3 times bigger you would use:
var mySVG = document.getElementById("mySvgElement");
var scaleCoefficient = 3; //this will make it 3 times bigger in x/y direction
mySVG.setAttribute("transform", "scale(" + scaleCoefficient + "," + scaleCoefficient + ")");
That will apply a scale transformation of '3' in x/y directions thus making the element 3 times bigger without changing it's aspect ratio
SVG elements are defined by a transformation matrix - this is what vector shapes generally use to define translation/rotation/size without changing the actual SVG geometry data of the shapes themselves.
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