I created my first js app with canvas and it doesn't work. Code was coppied from http://fabricjs.com/ and just wrapped in jQuery.
fab.js
var $ = jQuery;
$(document).ready(function(){
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
});
html
<html>
<head>
<title>Fabric.js</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="canvasjs.min.js"></script>
<script src="fabric.min.js"></script>
<script src="fab.js"></script>
</head>
<body>
<div id="c">
</div>
</body>
</html>
Uncaught Error: Could not initialize canvas element
What is going wrong?
I came to the resolution:
just replace div attribute with canvas!
<html>
<head>
<title>Fabric.js</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="canvasjs.min.js"></script>
<script src="fabric.min.js"></script>
<script src="fab.js"></script>
</head>
<body>
<canvas id="c">
</canvas>
</body>
</html>
And it's working now.
Related
I was testing this sample code and I obtained the error
Uncaught TypeError: Cannot set property 'width' of null
where "canvas.width = ...".
Could you help me? Here the code:
var canvas = document.getElementById("sim00");
var dim = {
w: 600,
h: 480
};
canvas.width = Math.min(dim.w, window.innerWidth - 20);
canvas.height = Math.min(dim.h, window.innerHeight - 20);
canvas {
border: 1px solid #d3d3d3;
max-width: 100%;
height: auto;
}
<canvas id="sim00" width="300" height="300"></canvas>
I had the same issue, What worked is that I changed the position of my script tag.
Automatically when I generate my HTML skeleton, the script tag appears in the <head>
but after placing it in the <body>, my code worked.
<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
</body>
</html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="1950px" height="800px"></canvas>
<canvas id="canvasbg" width="1950px" height="800px"></canvas>
<!-- I omitted some code for simplicity. -->
<!-- Bottom line, Check the placement of your js file. -->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
You have to use style to change css from js.
canvas.style.width = Math.min(dim.w, window.innerWidth - 20);
canvas.style.height = Math.min(dim.h, window.innerHeight - 20);
<!DOCTYPE html>
<html>
<body>
<div id="container">
<canvas id="myCanvas" width=350 height=250>
</canvas>
</div>
</body>
</html>
to change the size use
var myCanvas = document.querySelector("#myCanvas");
myCanvas.width = 350;
myCanvas.height = 250;
I cannot get Paper.js to draw a rectangle. I've followed the tutorial but nothing seems to be working. Can you tell me what's wrong with my code below?
<!DOCTYPE html>
<html>
<head>
<!--load paper.js-->
<script type="text/javascript" src="http://localhost/node_modules/paper/dist/paper-core.js"></script>
<!--drawing script-->
<script type="text/javascript" canvas="canvas">
window.onload = function() {
var canvas = document.getElementById("canvas");
paper.setup(canvas);
var meterStart = new paper.Point(5,5);
var meterSize = new paper.Size(40, 720);
var meter = new paper.Rectangle(meterStart, meterSize);
meter.strokeColor = 'black';
paper.view.draw();
}
</script>
</head>
<body>
<canvas id="canvas" height="750px" width="600px"></canvas>
</body>
</html>
The code you are using doesn't actually draw out the rectangle correctly. Instead, it just defines the rectangle object.
Here's the correct way to draw a rectangle: https://jsbin.com/niwegobanu/edit?html,js,output
<!DOCTYPE html>
<html>
<head>
<!--load paper.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.js"></script>
</head>
<script type="text/paperscript" canvas="myCanvas">
var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
path.selected = true;
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
Hey my image wont load onto the canvas. I've been at this for hours and I cant figure out what it is. I started to debug my code in google chrome and the console says canvas.width is set to null. Thats the only error I can find.
Here is my code:
function gameLoop()
{
drawBackground();
drawPlayer();
}
function drawBackground()
{
var img = new Image();
img.src = "Images/GrassTexture.png";
g.drawImage(img,0, 0, 500, 500);
}
function drawPlayer()
{
var player1 = new Image();
player1.src = "Images/Players/Mignolet.png";
g.drawImage(player1,0, 0,50 , 50);
}
setInterval(gameLoop, 1);
var canvas = document.getElementById("Canvas");
canvas.width = 500;
canvas.height = 500;
var g = canvas.getContext("2d");
html
html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<script type="text/javascript" src="Js/Js.js"></script>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
</body>
</html>
Css
#Canvas
{
border: 1px solid black;
width:500px;
height:500px;
margin-left: 300px
}
the script is being called before the html is rendered which is why you were getting the error. its always best to place scripts just before the <body> tag ends.
<html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
<script type="text/javascript" src="Js/Js.js"></script>
</body>
Recently, i have been writing a single page app using backbone. When i try to create a animation like throwing a card but i can't use jquery to do this. I found that after backbone view call this render(). I try to select DOM element by jquery and modify it. It didn't change anything? Does anybody know this?
<!DOCTYPE html>
<head>
<style type="text/css">
#logo {
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/template">
<image id="card" src='10.png'/>
<br/>
<input type="button" id="btn" value="di chuyển"/>
</script>
<script src="move.js"></script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
</body>
</html>
(function($){
var aniView = Backbone.View.extend({
template: _.template($('#template').html()),
events:{
"mouseover input[type=button]":"moveCard"
},
moveCard:function () {
alert('di chuyển');
move('#card')
.add('margin-left', 100)
.end();
},
render:function () {
$('#container').html(this.template());
}
});
var a = new aniView();
a.render();
})(jQuery);
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>RJI Events</title>
<link rel="stylesheet" type="text/css" href="stylesheets/scrollbar.css">
<link rel="stylesheet" type="text/css" href="stylesheets/app.css">
<style type="text/css">
#import url("http://www.google.com/uds/css/gsearch.css");
#import url("gmlocalsearch.css");
</style>
<script type="text/javascript" src="jslibs/cubiq-iscroll/iscroll.js"></script>
<script src="jslibs/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jslibs/jquery-ui-1.8.14.custom/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="jslibs/cubiq-iscroll/iscroll.js" type="text/javascript"></script>
<script src="jslibs/phonegap-1.0.0.js" type="text/javascript"></script>
<script src="jslibs/handlebars.1.0.0.beta.3.js" type="text/javascript"></script>
<script src="app/start.js" type="text/javascript"></script>
<script>
var myScroll;
function OnLoad() {
//GSearch.execute("google");
//I feel like it should go here
}
function loaded() {
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyCrw28V3lIOj9Rav9_7fVWrB2sKUzoqKkc"
type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
// Create and Center a Map
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(38.95, -92.32), 15);
// bind a search control to the map, suppress result list
map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT));
}
}
GSearch.setOnLoadCallback(initialize);
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="header">Event Name</div>
<div id="wrapper">
<div id="scroller">
<div id="map_canvas" style="width:99%;height:500px"></div>
</div>
</div>
<div id="footer">
<div id="footerInfo">
<div id="footerEvents-active"><a class = "footer-link" href = "index.php">Events</a></div>
<div class="footerSpacer">|</div>
<div id="footerRJI"><a class = "footer-link" href = "aboutRJI.html">RJI</a></div>
<div class="footerSpacer">|</div>
<div id="footerAbout"><a class = "footer-link" href = "about-us">About</a></div>
</div>
</div>
</body>
</html>
Im sort of new to stack overflow, so sorry if im not specific enough. Im using the localsearch from here http://code.google.com/apis/ajax/playground/#localsearch and would like to have it have a default search value, and search it on load like in this example http://code.google.com/apis/ajax/playground/#center_localsearch. Thank you, i appreciate all of the help. Also, this is for a mobile phone app, although if it works in the browser it will work on the phone