JS building up a city map - javascript

Alright so I got this issue.
I am currently making a City Map (village) for my game, but the problem is building placing. How do I achieve this?
Now im taking for example Ikariams map as an example, testing grounds. Now this is the map itself
http://www.mmoreviews.com/imgs/Ikariam-shot-1.jpg
Now how do I place the buildings in? Getting coordinates of where the building should be and then just fit in the building.png into it or?

A good solution for that is using the HTML5 Canvas element. That allows you to have a background image and draw other images on it. Drawing lines, circles is quite simple as well (that can be animated with javaScript).
You need the canvas itself:
<canvas id="canvas" width="800" height="600">
</canvas>
Some CSS:
canvas{
background-image: url('village.jpg');
}
And some lines in your <script>
var canvas = document.getElementById("canvas");
var map = canvas.getContext("2d"); //main object to draw
var house=new Image();
house.src='house.jpg';
house.onload=function(){
map.drawImage(house, 80,80); //actually drawing and giving coordinates
}
Hope it is helpful.

Related

Re-aligning Javascript/Canvas drawing?

So I have a semi-complex canvas drawing someone gave me. It draws an image vertically (i.e., top-down). Let's assume its a stick figure with facial features.
This is done in Javascript and Canvas. i.e.: ctx.beginPath(), ctx.moveTo(x,y), ctx.lineTo(1,1), etc.
I want the stick figure to move towards some point (x,y) and to face that direction while moving toward it. For example, if the x,y is near the bottom right, I want the stick figure to be oriented in a way such that its feet are facing towards the bottom right while it is moving.
The main question is, how would I go about doing this (i.e changing the stickman), knowing that I have a "hardcoded" drawing (in this example, stickman) that has been given to me?
You can render the received image on a separate canvas (doesn't need to be displayed) and use ctx.canvas.toDataURL() to convert it to an image. You could then embed the resulting image in your canvas and apply transforms to it more easily.
I mentioned this in a comment on the question but it sounded like fun, so I implemented a proof of concept.
var canvasObject = function(ctx) {
ctx.beginPath();
ctx.moveTo(0,0);
ctx.arc(30,30,15,0,2*Math.PI);
ctx.fillStyle='red';
ctx.fill();
return ctx;
}
var myCtx = document.querySelector('canvas').getContext('2d');
var objCtx = document.createElement('canvas').getContext('2d');
var renderedObjUrl = canvasObject(objCtx).canvas.toDataURL();
var renderedObj = document.createElement('img');
renderedObj.setAttribute('src', renderedObjUrl);
myCtx.drawImage(renderedObj, 30, 10);
<canvas id="myCanvas" width="600" height="400"></canvas>

Clipping multiple images in HTML5 canvas

I am working on HTML5 canvas with image manipulation. In my canvas I have number of images. When I want to clip the images individually. But when I clip one image by creating a shape and use clip() function, it is working fine. But the problem arise when I try to clip another image using the same method. As the canvas stored the previous shape it will concatenate with the new one and clip the second image accordingly. I want destroy the previous shape. Please note that I can't use the clearRect() to clear the canvas as my previous clipped image is there.
Please ref the link :
Demo Problem
In the link drag the image into canvas predefined layer and drag the image around. You can clearly see that the image got clipped properly if it try to go out of the border.
Now drag another image into the canvas in a different box. Now you can see the clipping is not functioning properly.
Here what I have done in the script :
JS Script
Here the JSFiddle Link
JSFiddle Link
Can you help me to fix this issue?
It will be helpful if you find another way to clear the previous shape.
Thanks in advance.
I have fix the issue by own. The canvas doesn't provide the multiple image clip option. So if you want to clip multiple image in your canvas you have to use your own clip function. Just clear the area by clearRect() of the canvas outside your selection. Iterate this process for each image and you are done !
Solution Link :
Solution Demo
JS Script Link :
JS Script
Thanks.
The best solution I could find is to use a hidden canvas, and draw to that, then use the putImageData method onto your main canvas.
var c = document.getElementById("myCanvas");
var ctemp = document.getElementById("myCanvasTemp");
var ctx = c.getContext("2d");
var ctxTemp = ctemp.getContext("2d");
ctxTemp.fillStyle = "red";
ctxTemp.fillRect(10, 10, 50, 50);
ctxTemp.fillStyle = "blue";
ctxTemp.fillRect(20, 20, 50, 50);
function copy() {
var imgData = ctxTemp.getImageData(10, 20, 50, 10);
ctx.putImageData(imgData, 10, 10);
}
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvasTemp" width="300" height="150" style="display:none;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br /><br />
<br />
<button onclick="copy()">Copy</button>

How overlay image over a cup using html5 canvas

I am new to HTML5 canvas. I have a image of a cup, I am rendered that in canvas.
This is image of cup :
Now I am trying render another image (My photo that is in normal rectangular size) in upload your design area of this image. How can I render this image which looks like that image on cup?
I want to get the final image like this :
I am uses canvas element to upload the image.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:5px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="js/test.js" type="text/javascript"></script>
</body>
</html>
JS
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var x = 0;
var y = 0;
var width = 290;
var height = 297;
imageObj.onload = function() {
context.drawImage(imageObj, x, y);
};
imageObj.src = 'images/cup.jpg';
You want your second image to "warp" and appear as if it's wrapped around the cup.
You cannot warp your second image into a curved image using "out-of-the-box" context 2d
Using html Canvas 2d Context, you can only do quadrilateral skewing. Therefore, after skewing an image each opposing side will always be parallel.
Therefore, you cannot get your image to warp into a curved image using "out-of-the-box" context 2d.
A few workarounds...You can use an offscreen temporary canvas to "warp" your second image into a curve. Then you can draw that curved image on top of the cup image using context.drawImage. Here are 2 alternatives that let you "fake" curvature of an image.
Alternative #1: Texture Mapping
You can use texture mapping to apply perspective curvature to your second image:
http://archive.gamedev.net/archive/reference/articles/article852.html
Alternative #2: Vertically slice and stretch
You can vertically slice your second image to create perspective curvature. You can use the resizing capability of context.drawImage to "stretch" pixels into your curved shape like in this previously Stackoverflow answer: How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
jsfiddle.net/AbdiasSoftware/e8hZy/

How can I capture the background of HTML5 Canvas when using toDataURL("image/png")?

I'm creating a collage making application.
This is the code of Canvas. The image is appearing in the background of canvas.
<canvas id="c" width="800" height="600" style="left: -300px; background-image: url('_include/img/Images/rainy_day-1366x768.jpg');"></canvas>
But, when I click on Create Collage button the background is transparent. How can I capture the canvas with background image?
Button click code:
function convertCanvasToImage() {
var canvas = document.getElementById('c');
var image_src = canvas.toDataURL("image/jpeg");
window.open(image_src);
}
I've referred the similar questions and found that we can use or and place Canvas over it. I'm not getting how can I implement that and when I will click on Create Collage button, its gonna capture the background? I'm not sure about it. I'm using Fabric.js
Thanks for any help.
You can't! CSS backgrounds are not part of the canvas (just the element as any background to other elements).
You you need to draw the background onto the canvas instead of using it as a CSS background as this is the only data captured by toDataURL().
If you are using clearRect or fillRect to update the canvas you can consider using drawImage instead with the background image.
Better to use html2canvas script.
The code look like this.
html2canvas($("#c"), {
onrendered: function(canvas) {
var Image1 = canvas.toDataURL("image/jpeg");
window.open(Image1);
}

possible to render canvas drawing into div?

I am trying to draw a shape on an HTML5 canvas but have the shape appear in a div (that can be manipulated by javascript). How can i do this? I would post code but i dont even know where to start with this. Please help.
To clarify: i want the shapes rendered on the canvas to be placed in divs. Sorry for any confusion.
Mozilla Drawing: https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes
<div>
<canvas id="my_canvas"></canvas>
</div>
<script>
var canvas = document.getElementById('my_canvas');
// Set width height. You should probably use the width/height of the div.
canvas.width = 300;
canvas.height = 300;
var ctx = canvas.getContext('2d');
// Draw something with ctx.....
// ....
</script>
You could use the library Canvas2Image. It will allow you to convert what's on the Canvas into an image. There are some quirks on a per browser basis, but it is the closest thing to what you want to do without having to put many canvas elements on your page that you update in tandem.

Categories

Resources