I'm a complete beginner to JS and I'm just playing around with HTML5. While experimenting, I came across this issue. I have something like this:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function graph() {
// ...stuff that draws to canvas, verified "working"...
var downloadLink = document.getElementById("myCanvas").toDataURL();
$("#dlLink").attr("href", downloadLink);
}
$(window).load(function() {
graph();
});
</script>
</head>
<body>
<div class="container">
<h1 style = ";padding-bottom:30px;">Tool</h1>
<canvas id="myCanvas" width="400" height="400"></canvas>
Download
</div>
</body>
</html>
When I click the download link with the base64 encoding, I get a blank image. Can anyone bring to light why this is happening? It seems like the link is generated before the canvas has anything on it, but I can't be sure.
Instead, try this:
$("#dlLink").click(function(){
var win=window.open();
win.document.write("<img src='"+document.getElementById("myCanvas").toDataURL()+"'/>");
});
Try passing toDataURL a content type like "image/png" or "image/jpeg". (canvas.toDataURL("image/png"));
Related
I'm coding in Javascript and I came to an example which I figure was strange.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,20,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
The above example works and outputs a circle.
However, when I try to copy the exact codes of the script onto a javascript.js file, the circle ceases to exist. Why is that the case?
<!DOCTYPE html>
<html>
<head>
<script src="javascriptFile.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
I thought the order of precedence would be that the web browser publishes the html code, and then constructs the DOM which I figure javascript code would run right after the html objects are created. I tried putting a function createShape() inside the canvas and then insert the rest of the codes in function createShape(){} of the javascriptFile.js file but didn't work either.
Would I have to always put the javascript codes in the html body for all canvas objects?
I thought the order of precedence would be that the web browser publishes the html code, and then constructs the DOM which I figure javascript code would run right after the html objects are created.
That is incorrect. Generally, if your JavaScript code appears in the source before the elements it is trying to access (and is not explicitly marked as defered), it will be executed before the browser continues to parse the page.
Embed the script at the bottom of the body and you should be fine:
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="myCanvas"></canvas>
<script src="javascriptFile.js"></script>
</body>
</html>
I wanted to create text box inside the canvas.
HTML
<canvas id="canvas" width="200" height="50"></canvas>
JavaScript
var input = new CanvasInput({
canvas: document.getElementById('canvas')
});
when I run the file HTML not have anything.
You just simply missed the libraries CanvasInput.min.js simply download from the here and add to your code.
Sample Code:
<html>
<title>sample</title>
<head>
<script src="CanvasInput.min.js"></script>
</head>
<body>
<canvas id="canvas" width="200" height="50"></canvas>
<script>
var input = new CanvasInput({
canvas: document.getElementById('canvas')
});
</script>
</body>
</html>
You cannot simply render a standard HTML input field inside a canvas, if that's what you wanted to achieve.
It looks like you were trying to utilize code from this developer page. But it seems you overlooked that there is a whole lot more Javascript required to simulate an input field as a canvas graphic element. Check out this Git repository to see the whole code.
I made a CodePen showing how to put a text input inside a canvas with this technique. For a quick demo add this script tag to your HTML code (you may want to host the code yourself later):
<script type="text/javascript" src="http://goldfirestudios.com/proj/canvasinput/CanvasInput.min.js?v=1.2.0"></script>
I have recently started working with Paper.js
I did as mentioned in the tutorial but couldn't get any output. I have mentioned the code below. Can someone please help me to solve the problem ?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/paper.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path();
path.strokeColor = 'black';
var start = new Point(100,200);
path.moveTo(start);
path.lineTo(start + [100,100]);
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
I am not sure where to put the different files inside my computer. Please help.
You forgot to add the script end tag,
</script>
right before the
</head>
tag.
Found it. It's embarrassing. Missed the tag !
I'm novel with javascript, and I trying to develop a webpage with dynamics graphs using for that canvas, html 5 and javascript. I wouldn't like to mix html "code" with javascript code, so I decided to keep it separated and call from html the javascript functions. The fact is that when I try to pass my canvas Id to javascript function I'm making a mistake and I have no idea how to fix it. This is my html code:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js">
window.onload = drawRectangulo('myCanvas');
</script>
</head>
<body>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
And my JavaScript file is like this:
function drawRectangulo(idCanvas)
{
var Canvas = document.getElementById('idCanvas');
var context = Canvas.getContext('2d');
context.fillRect(50,0,10,150);
}
I don't know if the call to drawRectangulo function on javascript file is right, and if I'm passing the canvas's id right: window.onload = drawRectangulo('myCanvas'); ¿How should I pass the Id from the html file to the js function?. Should I use: ('', "",) or should I create a new variable, initiate it with the canvas's id and pass it to the function? Am I processing good the variable id inside JavaScript function?
You need to do this:
window.onload = function () {
drawRectangulo('myCanvas');
}
Your code is calling drawRectangulo as soon as it runs, and assigning the result of the call (which is undefined) to window.onload.
Edit based on Dan's comment: you also need to change this:
document.getElementById('idCanvas');
to this:
document.getElementById(idCanvas);
Edit 2: You also need to separate your imported script from your inline script, like this:
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
<script type="text/javascript">
window.onload = drawRectangulo('myCanvas');
</script>
A single <script> element can either import a script from another file, or define an inline script, or both. (That explains why moving your inline script elsewhere in your HTML made it work.)
I think this
var Canvas = document.getElementById('idCanvas');
should be
var Canvas = document.getElementById(idCanvas);
With those apostrophes there, you're not referencing the parameter.
I think I know why it doesn't work. I have made this change on html and now is working right:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
window.onload = function (){
drawRectangulo('myCanvas');
}
</script>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
I took out the window.onload from the header to the body and it worked. Thanks for your help anyway.
With the advent of the new HTML5 Canvas, I was wondering if it's possible to draw a HTML section onto the canvas?
The idea is to take a piece of existing HTML code (from the same page, or defined elsewhere) and turn it into graphics.
Something like:
htContext.drawElement(document.getObjectByID("someObj"),0,0);
Firefox has proprietary method drawWindow. With it you can draw the whole document on the canvas. But only in Firefox unfortunately. And also due to security issues you need permissions from the user to do it. So it's suitable only for some kind of internal project.
Here is the sample test page:
<!DOCTYPE html>
<html>
<head>
<title>drawWindow</title>
<script>
window.onload = function(){
netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
document.getElementById('canvas').getContext('2d').drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
}
</script>
</head>
<body>
<h1>Test</h1>
<canvas id="canvas"></canvas>
</body>
</html>