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>
Related
I have this snippet of code that makes an SVG and draws it to a canvas.
Jsbin Link: https://jsbin.com/lehajubihu/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<style>
#imgNode {
border: "10px dotted black";
}
</style>
</head>
<img id="imgNode" style="border: 1px dotted black"></img>
<body>
<script>
const { body } = document;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const tempImg = document.createElement("img");
tempImg.addEventListener("load", onTempImageLoad);
tempImg.src =
"data:image/svg+xml," +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>'
);
const targetImg = document.querySelector("#imgNode")
function onTempImageLoad(e) {
ctx.drawImage(e.target, 0, 0);
targetImg.src = canvas.toDataURL();
}
</script>
</body>
</html>
The code does work but the width and height is not dynamic. From the image, we can see that the size is very big compared to the size of the actual HTML as shown below
How do I make the image/canvas render only the HTML and no extra space?
In your image rendering function onTempImageLoad(e) you can add this:
function onTempImageLoad(e) {
canvas.width = tempImg.width;
canvas.height = tempImg.height;
ctx.drawImage(e.target, 0, 0);
targetImg.src = canvas.toDataURL();
}
But you need to check your svg because it's the one that contains extra spaces.
It seems to be in 300x150, you can do some tests by setting the size of the svg in pixels by replace width="100%" and height="100%".
tempImg.src =
"data:image/svg+xml," +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>'
);
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>
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>
I'm using a html 5 to draw a line on canvas with a button.
Does anybody know why?
<!DOCTYPE html>
<html>
<body onload="">
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button name="draw" onclick="drawLine()">Draw Line</button>
<script type="text/javascript" src="canvashtml5.js" ></script>
</body>
</html>
darwLine function is on the external javascript as canvasHtml5.js:
function drawLine(){
var canvas = document.getElementById(myCanvas);
var context = canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(300,150);
context.stroke();
}
myCanvas
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFFF00";
ctx.fillRect(0,0,150,75);
}
I forgot to put myCanvas to quot like this: "myCanvas".
this var canvas = document.getElementById(myCanvas); must be like var canvas = document.getElementById("myCanvas");
Alternative:
Add an event listener to your button like so:
document.getElementById('drawLineBtn').addEventListener('click', drawLine, false);
This will cut down on your work in the future. See http://jsfiddle.net/kbXAN/23/
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: