How to Load paper.js library? - javascript

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 !

Related

Multiple js files in an html page

I'm writing some codes in P5JS. And I want to add multiple JS files to my HTML page. But when I do that, only the last one is displayed on the page. How can I show all of them?! And how can I style each one? For example I want to show one of them on top of the page, then have some HTML files or texts or whatever, then another JS file below them. How can style them using CSS? I have already linked the CSS file to the HTML page.
The site didn't allow me to paste the code the way I wanted so I uploaded the picture here
Thanks..
You can put all of the js files either in the head section:
<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>
or you can put it at the bottom of the file:
<html>
<head>
</head>
<body>
</body>
<script src=script1.js></script>
<script src=script2.js></script>
</html>
If you're going to add multiple p5js sketches to one HTML document you could create p5 instances to keep all variables out of the global scope of your page.
Example if the following was saved as 'sketch.js':
var sketch = function( p ) {
var x = 100;
var y = 100;
p.setup = function() {
p.createCanvas(700, 410);
};
p.draw = function() {
p.background(0);
p.fill(255);
p.rect(x,y,50,50);
};
};
var myp5 = new p5(sketch);
and then you would import the sketch and use it in a div in your HTML.
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
</style>
</head>
<body>
<div id="sketch"></div>
</body>
</html>
You would then repeat for other sketches. You can even have multiple p5js sketches in one js file.
With the code for your sketches and html this would probably be fairly quick to resolve.

Run time compile order

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>

Manipulate image in div in javascript

I have researched a lot but couldn't find specific solution. How to manipulate image pixels when a button is pressed? This is code I am working on:
HTML:
<html>
<head>
<script type="text/javascript" src="nhome.js"></script>
</head>
<p>Duke img</p>
<button onClick="my()"/>Click Me!</button>
</html>
JavaScript:
function my(){
var devil = new SimpleImage("devil.png");
for(var p in devil.values()){
p.setRed(200);
p.setGreen(100);
}
devil.print();
}
Any suggestions on where I am doing wrong? I am just a beginner in js.

Canvas toDataURL() giving blank image

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"));

best way to inject javascript into a iframe

I'm trying to inject a javascript into a iframe, but nothing works. I've already spent days with this issue, would be great if someone could give me some hints.
Example of subject:
The example.html:
<html>
<head>
</head>
<body>
<iframe src="http://example.com/test.html" id="myFrame">
</iframe>
</body>
</html>
The test.html:
<html>
<head>
</head>
<body background="./bg.jpg">
<p >Text </p>
<p >(<i>Something</i>)<br><img src="./img1.gif" align="left">Text</p>´
</body>
</html>
Desired Output from test.html:
<html>
<head>
<script type="text/javascript"> src="myscript.js</script>
</head>
<body background="./bg.jpg">
<p >Text </p>
<p >(<i>Something</i>)<br><img src="./img1.gif" align="left">Text</p>´
</body>
</html>
I've tried this, but it doesn't work:
The example.html:
<html>
<head>
<script type="text/javascript">
var rawframe = document.getElementById('myFrame');
var doc = rawframe.contentDocument;
if (!doc && rawframe.contentWindow) {
doc = rawframe.contentWindow.document;
}
var script = doc.createElement('script');
script.type = "text/javascript";
script.src = "myscript.js";
document.body.appendChild(script);
</script>
</head>
<body>
<iframe src="http://example.com/test.html" id="myFrame">
</iframe>
</body>
</html>
Thank you all for the help.
Unfortunately, I don't believe this is possible. I know I tried something along these lines before, but due to security reasons, browsers prevented it.
You are appending script to the document of the parent page, not to the frame page.
I'm not sure if this can be achieved at all, but one problem I see is timing.
You would run the javascript code before the content of iframe is loaded, right?

Categories

Resources