I have a processing sketch called test.pde which is in the same folder as my index.html web document. I also have a file called processing.min.js in that folder. I am trying to make it so that my processing sketch appears on my website.
Here is my code right now, but it just makes the resulting website blank:
<!DOCTYPE html>
<html>
<head>
<title>Yaxlat</title>
<link rel="stylesheet" type="text/css" href="websitestyle.css">
<script src="processing.min.js"></script>
</head>
<body>
<canvas data-processing-sources="test.pde"></canvas>
</body>
</html>
Wild guess, but maybe because youre not specifying the size of the canvas?
try something like
<canvas width="640" height="360"></canvas>
Im also trying to put a Processing sketch onto a webpage.
I've found a way to put the code straight into a HTML-file.
And it even works when I open the local file from my computer in a browser.
Try replacing your code in here:
<html>
<head>
<title>Mouse2D \ Examples \ Processing.org</title>
<!-- script type="text/javascript" src="/_ah/channel/jsapi"></script -->
<script src="processing.js" type="text/javascript"></script>
<!-- script src="http://processing.org/javascript/modernizr-2.6.2.touch.js" type ="!text/javascript"></script -->
</head>
<body>
<label>once</label>
<br>
<div class="proc">
<script type="application/processing">
void setup()
{
size(640, 360);
noStroke();
rectMode(CENTER);
}
void draw()
{
background(51);
fill(255, 204);
rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
fill(255, 204);
int inverseX = width-mouseX;
int inverseY = height-mouseY;
rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}
</script>
<canvas width="640" height="360"></canvas>
<div>this is below the canvas</div>
</body>
My problem is, that although this works locally, it jsut gives me a blank canvas on my Google App Engine.
Hope this helps you!
Related
I am trying to instantiate a class in one JavaScript file in another HTML file but I keep on getting this error.
Here is the code for the JavaScript file:
class Puzzle {
constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}
}
And here is the code for the HTML. It should be noted that I am also using chessboard.js and chess.js and that everything is saved in the same folder.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="css/chessboard.css" />
</head>
<body>
<script src="js/chess.js"></script>
<div id="board" style="width: 400px"></div>
<p>PGN: <span id="pgn"></span></p>
<script src="js/json3.min.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/chessboard.js"></script>
<script src="class.js"></script>
<script>
var pgnEl = $('#pgn');
const x = new Puzzle("test", "test");
pgnEl.html(x.fenStart);
</script>
</body>
</html>
What is causing this error and how can I fix it?
This could be a result from improper file locations, like #sideroxylon said, js/class.js instead of class.js.
"The HTML <base> tag is used to specify a base URI, or URL, for relative links." https://www.tutorialspoint.com/html/html_base_tag.htm This could be another reason your file is inaccessible.
It could also be from certain URL's being blocked. Try opening Developer Console (CTRL-SHIFT-I or F12) and looking for any errors on your page.
If you're loading over HTTPS any content from an HTTP source may be blocked. Here is your exact code (using online versions of each library) but with the class.js file loaded in as a regular script tag and including the starting <body> tag.
https://jsfiddle.net/ckazwozg/ As you should see, it is working quite well.
Edit: For convenience, here is the raw source code from the JSFiddle.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" href="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
<div id="board" style="width: 400px"></div>
<p>PGN: <span id="pgn"></span></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.js"></script>
<script>
// class.js
class Puzzle {
constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}
}
</script>
<script>
var pgnEl = $('#pgn');
const x = new Puzzle("test", "test");
pgnEl.html(x.fenStart);
</script>
</body>
</html>
I had the same error however what I did was ensure all my files are been saved to the root folder in your case I think that's js(since all your extension points to that location) in my case I've used only the file name after giving it javascript extension (.js) e.g...
I need some helping loading my JavaScript game on Chrome.
I wanted to code the traditional Snake game in JavaScript using a framework called p5.js, and I started with the canvas. The problem happens when I open the JavaScript file in Chrome (which I linked in my index.html file with a script tag).
Instead of the grey canvas appearing, per my JavaScript code, the code itself shows up on the Chrome page. Here's my code, have a look:
HTML
Snake | JS
<body>
<script src="F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src="F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src="F:\Code\JS\Snake\sketch.js" type="text/javascript"></script>
</body>
</html>
And here's the JS:
function setup() {
createCanvas(800, 800);
}
function draw() {
background(51);
}
Specs:
Chrome, Windows 10 Anniversary Edition.
P.S. Javascript is enabled, I have checked.
Try these things
1) Test your js code on www.codepen.io/pen/, some javascript doesn't run properly when local. (F:\Code)
2) Try to put your script at the end of the body tag. Attention that the scripts are loaded in the order they appear. Consider the dependencies.
Assuming the path F:\Code\JS\p5\p5-zip\ to your files are correct and you are not working in a zipped folder.
You should have a file like index.html, wich will be the root of your website.
Here's a minimal example, including your scripts:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src = "F:\Code\JS\p5\p5-zip\p5.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.dom.js" type="text/javascript"></script>
<script src = "F:\Code\JS\p5\p5-zip\addons\p5.sound.js" type="text/javascript"></script>
<script src = "F:\Code\JS\Snake\sketch.js" type = "text/javascript"></script>
</body>
</html>
Your javascript files should be placed in the bottom of the page,
just before the closing body tag
You must reference your js file in a good order for preventing some dependency issues
If you are able to browse your index.html file, right click on the page -> "show source code" and try to click on your js files reference, if the path is not correct you will have a 404 not found error.
i'm want to try paper.js so i make an html file like this :
<!DOCTYPE html>
<html>
<head>
<title>PAPERJS</title>
<script type="text/javascript" src="paper-core.js"></script>
<script type="text/paperscript" src="myscript.js" canvas="myCanvas">
</head>
<body>
<h1>paper js :</h1>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
But it don't recognize the type="text/paperscript"
my file myscipt.js only contain this :
var myBall = new Path.Circle(new Point(70, 70), 50);
myBall.fillColor = 'tomato';
after this declaration nothing is happening in my html file when i try it :
<script type="text/paperscript" src="myscript.js" canvas="myCanvas">
If you want to use the "text/paperscript" type you must use "paper-full" not "paper-core". The paper-core file does not include the paperscript interpreter.
Your problem is you missed the </script> end tag
Scripts that have different type other than text/javascript are not parsed by the html parser in browser but the paperscript type,you included are the custom type that the JS plugin for which you are including that particular type will run through your dom and use the content inside that file. (To be clearer)
My canvas wont show in my browser.
I'm guessing the reason is because of some newbie jquery mistakes.
The codes below are in two separate folders, Game.html and game.js
Game.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<canvas id="gameCanvas">
</canvas>
<script src="Scripts/jquery-2.0.3.js" type="text/javascript"> </script>
<script src="Scripts/game.js" type="text/javascript"> </script>
</body>
</html>
game.js:
var canvasWidth = 800;
var canvasHeight = 600;
$('#gameCanvas').attr('width', canvasWidth);
$('#gameCanvas').attr('height', canvasHeight);
var canvas = $('#gameCanvas')[0].getContext('2d');
canvas.strokeRect(0, 0, canvasWidth, canvasHeight);
Here is tested your code is working perfectly.
Look in your Scripts folder content files jquery-2.0.3.js and game.js.
the only possibility is error path, look at this.
And what browser are you testing? html5 canvas is then only works in some new browsers.
checked here if your browser does have canvas support
Code Equals
working example here
Are you sure your reference to the script file is correct. If both html and script are in two different folders, then the reference might need to be:
<script src="../Scripts/jquery-2.0.3.js" type="text/javascript"> </script>
<script src="../Scripts/game.js" type="text/javascript"> </script>
I've been working or sort of a paint program for Windows 8 in JavaScript, But I've stumbled upon a problem. I have no idea how to export a image from a canvas. I'm kind of familiar with the FileSavePicker but I need help.
I found this but I don't know how to create a "encoding" variable: Saving a Canvas as an image in Windows 8
If there's a simpler way or if someone could explain it that would be a great help.
You can use canvas.toDataURL() to create an image from your canvas.
Then you can open that image in a new window like this:
var win=window.open();
win.document.write("<img src='"+canvas.toDataURL()+"'/>");
Your user can do the usual right-click-save in that new window.
Here's working code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="gold";
ctx.strokeStyle="blue";
ctx.lineWidth=5;
ctx.rect(50,50,100,100);
ctx.fill();
ctx.stroke();
var win=window.open();
win.document.write("<img src='"+canvas.toDataURL()+"'/>");
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Ultimately to solve several issues using Html to make a Windows 8 app, I switched to C# and Xaml.
I used to like Html and JavaScript because it was familiar, but after I learned more about Xaml and C# I started to like it better. For example, instead of using <div> for almost every section of interface, you can use a, <Grid>, <Border>,<StackPanel>, and more. But for this particular problem I solved it pretty quickly.
public async void Preview_Update()
{
RenderTargetBitmap bitmap = new RenderTargetBitmap();
await bitmap.RenderAsync(canvas);
image.Source = bitmap;
}
And for the FileSavePicker, it's pretty simple: FileSavePicker