I am unable to implement JCanvas - javascript

I am new to learn JCanvas. I am trying to implement a simple JCanvas program.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src='jcanvas.min.js'></script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
<script>
var canvas = document.getElementById("drawingCanvas");
var ctx = canvas.getContext("2d");
$('canvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
</script>
</body>
</html>
But I am unable to Implement the above.
The Circle I am trying to draw here is not getting displayed on the canvas.
What Am I doing wrong?

Looks like your code is quite fine itself. Consider wrapping your code in $(document).ready(function () {});, like this:
<script>
$(document).ready(function () {
$('canvas#drawingCanvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
});
</script>
This guarantees that your code will executed when the whole DOM structure is loaded in browser memory and ready to interact with JavaScript. See jQuery docs for more details.
I've also created jsFiddle, where your code just works. I attached the jCanvas using URL from here, so it might stop working occasionally.
UPDATE: removed unused variables from the code, added id to jQuery selector.
UPDATE2: Without jsFiddle, it should look like that
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sample</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('canvas#drawingCanvas').drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
});
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
</body>
</html>
UPDATE3: Please do not use jCanvas attaching like in the sample above, the link was grabbed from jCanvas showroom and is not supposed to be reliable CDN. It might be changed or removed, and it might not be ready to high load.

there are probably other ways, but this works. I sourced jCanvas and jQuery internally
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src='jcanvas.min.js'></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function init(){
$("canvas").drawArc({
strokeStyle: 'green',
draggable: true,
x:100, y:100,
radius: 50
});
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="500" height="500" style="border:1px solid black;align:center;"></canvas>
</body>
</html>

Related

when using double buffering to draw image on canvas, cannot get the complete image?

this is my code, i use two canvas to drawimage to avoid flickering, but i cant get the full image when use this way, anyone can help please?
if i only use one canvas the image display fine, it seems the secondarycanvas that created by Javascript got some issue to display the image, but i can't find what's wrong. any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.weight=c.weight;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src=imageEncoder[24].background;
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>
I change secondaryCanvas.weight=c.weight; to secondaryCanvas.width=c.width; and your code seems to work now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.width=c.width;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src= "https://picsum.photos/360/740"
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>

How do I get pixels from Canvas created by js-dosbox

I have worked through the dosbox Div to find the canvas, but once I have found the node holding the canvas how can I reference it?
Getting the context of dbGranChild[0] just results in an error..
Im trying to build an array of the pixels that make up the dosbox window, so thought using the canvas get image and looping through as frames change would be one way. If there is a better way altogether than my above attempt happy to take that as an answer.
Code: http://plnkr.co/edit/MC1n9HfwWcqXlAk95XCO?p=preview
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js-dos api</title>
<style type="text/css">
.dosbox-container { width: 640px; height: 400px; }
.dosbox-container > .dosbox-overlay { background: url(https://js-dos.com/cdn/digger.png); }
.dosbox-start { font-size: 35px !important; }
</style>
</head>
<body>
<div id="dosbox"></div>
<br/>
<button onclick="dosbox.requestFullScreen();">Make fullscreen</button>
<script type="text/javascript" src="https://js-dos.com/cdn/js-dos-api.js"></script>
<script type="text/javascript">
var dosbox = new Dosbox({
id: "dosbox",
onload: function (dosbox) {
dosbox.run("https://js-dos.com/cdn/digger.zip", "./DIGGER.COM");
},
onrun: function (dosbox, app) {
console.log("App '" + app + "' is runned");
}
});
var dosboxId = document.getElementById('dosbox');
dbChild = dosboxId.childNodes;
dbGranChild = dbChild[0].childNodes;
console.log(dbGranChild[0])
</script>
</body>
</html>
See the w3Schools tutorial.
First, you need to use a <canvas> tag instead of a <div>.
That is, replace this:
<div id="dosbox"></div>
with something like this:
<canvas id="dosbox" width="200" height="100" style="border:1px solid #000000;">
</canvas>`
Second, replace this code:
var dosboxId = document.getElementById('dosbox');
dbChild = dosboxId.childNodes;
dbGranChild = dbChild[0].childNodes;
console.log(dbGranChild[0])
With something like this:
var c = document.getElementById("dosbox");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

How is it possible to combine rafael.js and paper.js in one html?

While I was trying to use two libraries (rafael.js and paper.js) in one html page, I got various errors.
Case 1. Uncaught ReferenceError: Raphael is not defined. In the file "rafael.js", the line:
var paper = Raphael(0, 0, 320, 200);
was the reason of the error. But obviously it is imported in html:
<head>
...
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/mypaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<script src="js/rafael.js" type="text/javascript"></script>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafael.js"></script>
...
</body>
Case 2. paper.js output: Uncaught Error: Unable to find canvas with id "myCanvas", but the canvas is there. Here is html:
<head>
...
<script src="js/rafael.js" type="text/javascript"></script>
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/mypaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafael.js"></script>
...
</body>
The same error also happened when I had rafael and paper code in one .js file ("myrafaelpaper.js") despite the fact that myCanvas is there:
<head>
...
<script src="js/rafael.js" type="text/javascript"></script>
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/myrafaelpaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafaelpaper.js"></script>
...
</body>
Separately, they work fine.
"myrafaelpaper.js" is here:
//rafael.js part
var paper = Raphael(0, 0, 320, 200);
var circle = paper.circle(0, 30, 50);
circle.attr("fill", "#f00");
console.log(circle.isPointInside(50, 30));
//paper.js part
var pathData = 'M100,50c0,27.614-22.386,50-50,50S0,77.614,0,50S22.386,0,50,0S100,22.386,100,50';
var path = new Path(pathData);
path.strokeColor = 'red';
path.strokeWidth = 5;
path.position+= new Point(100, 50);
path.segments[3].point.selected=true;
The content of "myrafael.js" and "mypaper.js" are analogical.
In all of the cases you've mentioned, the script-tag for myrafaelpaper.js is not closed (</script>).

html5 canvas javascript copy picture

I have a html5 page. It uses JQuery and sketch.js (for free drawing). I am NOT going to connect it to any web server. At this moment, I would like to be use this javascript as desktop application. My purpose is to copy image from one canvas to the other canvas in the same page. After draw something by free hand, I could see url is copied to textarea, but no picture after clicking Show URL link. Could someone give me hints how to make an copy of image from one canvas to the other?
/1/ Source codes, one need to add html tag in the beginning, do not forget <>
<head>
<title>sketch and free hand drawing</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="image/png"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/sketch.js"></script>
/2/One need to add /head above. do not forget <>
<body>
<script>
function toDo(){
console.log(document.getElementById("colors_sketch").toDataURL("image/png"));
document.getElementById("cvs").value=document.getElementById("colors_sketch").toDataURL("image/png");
document.getElementById("txt").value=document.getElementById("colors_sketch").toDataURL("image/png");
}
</script>
<div class="tools">
Download
</div>
<div class="tools">
show URL
</div>
<textarea id="txt"></textarea>
<hr/>
<canvas id="colors_sketch" width="800" height="300">hello</canvas>
<hr/>
<canvas id="cvs" width="800" height="300"></canvas>
<script type="text/javascript">
$(function() {
$.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
$('#colors_demo .tools').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> ");
});
$.each([3, 5, 10, 15], function() {
$('#colors_demo .tools').append("<a href='#colors_sketch' data-size='" + this + "' style='background: #ccc'>" + this + "</a> ");
});
$('#colors_sketch').sketch();
});
/3/ one need to add /script above and /body above and /html above do not forget <>
To move an image from one canvas to another, you can simply use drawImage
destinationContext.drawImage(sourceCanvas,0,0);
The pixels from the source canvas will be drawn onto the destination canvas.
A Demo: http://jsfiddle.net/m1erickson/2hb56/
I tried modifying your code, but it appears you also have a design issue.
SketchJS will erase your copied image in preparation for it's own drawings (the copied image is erased).
Example code copying pixels from one canvas to another:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="sketch.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// get references to canvases and contextx
sourceCanvas=document.getElementById("source");
sourceContext=sourceCanvas.getContext("2d");
destinationCanvas=document.getElementById("destination");
destinationContext=destinationCanvas.getContext("2d");
// draw a test image into the source canvas
var testImg=new Image();
testImg.onload=function(){
sourceContext.drawImage(testImg,0,0);
}
testImg.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
// when the button is clicked
// copy the source canvas onto the destination canvas
$("#copy").click(function(){
destinationContext.drawImage(sourceCanvas,0,0);
})
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="source" width=256 height=256></canvas><br>
<button id="copy">Copy canvas above to canvas below</button><br>
<canvas id="destination" width=256 height=256></canvas>
</body>
</html>

Why is document.getElementById returning a null value?

I've debugged my code and realized that a method in my Javascript isn't working properly. Anyone have an idea why?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tetris</title>
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<canvas id="tetrisBoard" width="800" height="600">
Your browser does not support HTML 5.
</canvas>
<p>
</p>
</body>
</html>
main.js:
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
The result of document.getElementById("tetrisBoard") is a null value. Why?
Because you're calling your code prior to the elements existing. Put the script right before the closing body tag and you'll be fine.
Another solution is to do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tetris</title>
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="setup();">
<canvas id="tetrisBoard" width="800" height="600">
Your browser does not support HTML 5.
</canvas>
<p>
</p>
</body>
</html>
Then, in your main.js use something like this:
function setup() {
// Your code here
}
The good thing about this is that you don't have to put the script tag in an unintuitive and unstandard spot (such as right before the end of the body).
Also you could make the script to wait until all the DOM it is loaded... like this:
using jquery
$(document).ready(function(){
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
});
vanilla JavaScript:
document.addEventListener("DOMContentLoaded", function () {
board = document.getElementById("tetrisBoard")
ctx = board.getContext("2d")
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect 10, 10, 55, 50
}, false);

Categories

Resources