drawImage() with wrong coordinates canvas - javascript

i have a problem:
I'm working on map generator, using html canvas, the user inputs X,Y, width and height of an image.
But when i use drawImage with users input, the image doesn't fit the Canvas XY and the select height and width in pixels. Is there anything that I can use to solve this?
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
</div>
</body>
<script>
function loadXml(){
co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
canvas = document.getElementById("map");
context = canvas.getContext("2d");
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>

Ground was undefined. I've put it in for you.
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
<img id='ground' style='display: none' /> <!--You forgot the image!-->
</div>
</body>
<script>
function loadXml(){
var co = document.getElementById("xmlinput").value.split(','), // X, Y, H, L
canvas = document.getElementById("map"),
context = canvas.getContext("2d"),
ground = document.getElementById('ground'); //ground was undefined!
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>

Your code works perfectly.Just add this to the page(create an image object)
<!DOCTYPE html />
<html lang=''>
<head>
<title>Map tools</title>
</head>
<body>
<div align='center'>
<canvas id='map' class='mapcanvas' width="800" height="400">
</canvas>
<p>Send</p>
<textarea id="xmlinput" class="inputTextArea" placeholder="coords"></textarea>
</div>
</body>
<script>
function loadXml(){
co = document.getElementById("xmlinput").value.split(',') // X, Y, H, L
canvas = document.getElementById("map");
context = canvas.getContext("2d");
var ground=new Image();
ground.src = 'http://i.imgur.com/Z3DyMAM.png'
ground.onload = function (){
context.drawImage(ground, co[0], co[1], co[2], co[3]);
}
}
</script>
</html>

Related

How to fix "TypeError: Cannot set property 'width' of null"?

I was testing this sample code and I obtained the error
Uncaught TypeError: Cannot set property 'width' of null
where "canvas.width = ...".
Could you help me? Here the code:
var canvas = document.getElementById("sim00");
var dim = {
w: 600,
h: 480
};
canvas.width = Math.min(dim.w, window.innerWidth - 20);
canvas.height = Math.min(dim.h, window.innerHeight - 20);
canvas {
border: 1px solid #d3d3d3;
max-width: 100%;
height: auto;
}
<canvas id="sim00" width="300" height="300"></canvas>
I had the same issue, What worked is that I changed the position of my script tag.
Automatically when I generate my HTML skeleton, the script tag appears in the <head>
but after placing it in the <body>, my code worked.
<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
</body>
</html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
<!-- I omitted some code for simplicity. -->
<!-- Bottom line, Check the placement of your js file. -->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
You have to use style to change css from js.
canvas.style.width = Math.min(dim.w, window.innerWidth - 20);
canvas.style.height = Math.min(dim.h, window.innerHeight - 20);
<!DOCTYPE html>
<html>
<body>
<div id="container">
<canvas id="myCanvas" width=350 height=250>
</canvas>
</div>
</body>
</html>
to change the size use
var myCanvas = document.querySelector("#myCanvas");
myCanvas.width = 350;
myCanvas.height = 250;

innerHtml='' out of memory and canvas always take memory

This is one test,I click the button named paint once,the memory grow more,faster and faster,how can I delete the canvas from memory,($('#div').empty() does not work)if it can not be resolved,I can display it,but every canvas will be biger and biger,because I paint always,can you help me?help!!!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="aa" style="position: relative;width: 500px;height: 500px;background-color: #048ca7;z-index: 0">
</div>
<script>
var i=500;
var uu=new Array();
var ii=function(){
var c=document.getElementById('aa');
c.innerHTML='';
var num1,num2;
var canvas;
var ctx;
var str='';
for(var j=0;j<=i;j++){
num1=Math.random();
num2=Math.random();
str+=("<canvas id='"+j+"' width='100' height='100' style='margin-top:"+num1*400+"px;margin-left:"+num2*400+"px;position: absolute;z-index:1'></canvas>");
}
c.innerHTML=str;
for(j=0;j<=i;j++){
canvas=document.getElementById(j.toString());
ctx=canvas.getContext('2d');
ctx.strokeStyle='black';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(80,80);
ctx.stroke();
}
}
</script>
<button style="width: 100px;height: 20px;margin-top: 20px" onclick="ii()">paint</button>
</body>
</html>

drawImage() isn't working for canvas

here is my code below I can't figure out what I'm doing wrong. when I preview it, the image isn't there, just the canvas border.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
<body>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
};
</script>
</body>
</html>
the console displays the link to your file. look there if the correct
Maybe you should have to wait until the image is loaded before you draw it. Try this instead:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'http://techtastico.com/files/2014/06/Apple-Swift-Logo.png';
base_image.onload = function(){
context.drawImage(base_image, 0, 0);
};
}
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

how to add image in this canvas its not coming for me please check this?

Please tell me how to put this image in canvas and then move it to next form this same image
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function a () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("Image1");
ctx.drawImage(img, 20, 30,10,10);
function copy() {
var imgData = ctx.getImageData("img");
ctx.putImageData(imgData, 10, 70);
}
</script>
</head>
<form id="form1" runat="server">
<body onload =a()>
<asp:Image ID="Image1" runat="server" ImageUrl="~/q.jpg" width="300px" Height="200px"/>
<canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
<button onclick="copy()">Copy</button>
</body>
</form>
</html>
There is some issue on your code snippet(for example, body outside the form, andd the tentative to get reference to image from canvas), but to draw image to canvas, manipulate the content of the canvas and then update the source image from the result of canvas manipulation try this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function a() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("Image1");
ctx.drawImage(img, 20, 30, 10, 10);
}
function copy() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.getImageData(20, 30, 10, 10);
ctx.putImageData(imgData, 10, 70);
document.getElementById("Image1").src = c.toDataURL();
return false;
}
</script>
</head>
<body onload =a()>
<!--<asp:Image ID="Image1" runat="server" ImageUrl="" width="300px" Height="200px"/>-->
<img src="notfunny.png" id="Image1"/>
<canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
<button onclick="copy()">Copy</button>
</body>

Can't get HTML5 Canvas to Work

I am learning HTML5 and can't get anything to appear on the screen. It just comes up totally white. All of the code is below.
HTML:
<head>
<script src="canvas.js"></script>
</head>
<body>
<section id="main">
<canvas id="canvas" width="600" height="400">
Get Chrome
</canvas>
</section>
</body>
</html>
JavaScript
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.shadowOffsetX = 4;
canvas.shadowOffsetY = 4;
canvas.shadowBlur = 6;
canvas.shadowColor = 'rgba(0,0,255,.5)';
canvas.font="36px Tahoma";
canvas.textAlign="end";
canvas.strokeText("omgjj", 300, 500);
}
window.addEventListener("load", doFirst, false);
Your Y coordinate is off the canvas. Change this:
canvas.strokeText("omgjj", 300, 500);
To this:
canvas.strokeText("omgjj", 300, 200);
And your text will appear:

Categories