As I am trying the easeljs javascript library, I've coded a short page in order to print a blue square. Unfortunately, I've tested it under Chromium in Ubuntu 12.04 host : but it does not show anything. Furthermore, the developper console of Chromium has not detected any error :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Drag'n drop sur un carre</title>
<script src="easeljs-0.5.0.min.js"></script>
<script src="myScript.js"></script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="640" height="480"></canvas>
</body>
</html>
myScript.js
function init(){
stage = new createjs.Stage(document.getElementById("mycanvas"));
carre = new createjs.Shape();
carre.graphics.beginFill(createjs.Graphics.getRGB(0, 0, 255));
carre.graphics.rect(0, 0, 30, 30);
carre.x = 70;
carre.y = 50;
stage.addChild(carre);
}
So : what's wrong ?
Thanks in advance.
(I'm using easeljs 0.5.0)
You need at the very end to have stage.update();
Related
I want to use HTML canvas fillRect() to make a block with a diagonal line from upper right to bottom left.
I managed to create a block with a line from upper left to bottom right.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
for(var i = 0; i < 300; ++i) {
ctx.fillRect(i, i, 1, 1);
}
</script>
</body>
</html>
How can I get what I want based on this code?
I managed it using lineTo.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(300, 0);
ctx.lineTo(0, 300);
ctx.moveTo(0, 300);
ctx.lineTo(300, 0);
ctx.stroke();
</script>
</body>
</html>
Okay, so I've read numerous tutorials and a couple of threads here on stackoverflow, which has helped me to understand the canvas element a bit more, but am still having difficulties getting the crop to work. The code I am using is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Canvas Image</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- comments -->
<canvas id="canvas" width="640" height="600"></canvas>
<script>
var canvas = document.getElementById('canvas').getContext ('2d');
var canvasImage = new Image();
function drawCanvasImage(){
canvas.drawImage(canvasImage, 50, 25, 300, 350);
};
canvasImage.addEventListener('load',drawCanvasImage,false);
canvasImage.src = "Images/Batman.jpg";
</script>
<script>
var canvas = document.getElementById('canvas').getContext ('2d');
var canvasImage = new Image();
function cropImage(){
canvas.drawImage(canvasImage, 50, 25, 100, 100, 500, 100, 100, 100);
};
canvasImage.addEventListener('load',drawCanvasImage,false);
canvasImage.src = "Images/Batman.jpg";
</script>
</body>
</html>
My original image is an image that I've uploaded to my server, and it is displayed correctly, however my cropped image will not show at all. This is for a school project which is due tomorrow night, so any help would be appreciated. Thanks in advanced!
Figured it out! I misread my textbook, and in my original code I had:
function cropImage(){
canvas.drawImage(canvasImage, 50, 25, 100, 100, 500, 100, 100, 100);
};
After changing my code to:
function drawCanvasImage(){
canvas.drawImage(canvasImage, etc.)
the image displayed correctly. Now to just mess around with the coding to get it to what I need it to be.
How can I change the view area for a graph.
I have this example below se code an image
The left axes goes from 0 to 10 because there is data from 0 to 10 , but I still would like to show only 4 to 9, almost like its zoomed.
Is it possible ?
<title>Graf TEST </title>
</head>
<script src="http://127.0.0.1/charts/js/teechart.js" type="text/javascript"> </script>
<script src="http://127.0.0.1/charts/js/teechart-extras.js" type="text/javascript"></script>
<script language="JavaScript">
function draw() {
var Chart1=new Tee.Chart("canvas");
Chart1.title.text="test";
Chart1.applyTheme("minimal");
Chart1.palette.colors[0] ="green";
Chart1.addSeries(new Tee.Line([]) );
var Series1 = Chart1.series.items[0];
Series1.marks.style="value";
Series1.marks.visible=true;
Series1.colorEach="no";
Series1.format.stroke.size=3;
Series1.pointer.visible=true;
Series1.data.values[0]=6;
Series1.data.labels[0] ="Okt";
Series1.data.values[1]=9;
Series1.data.labels[1] ="Nov";
Series1.data.values[2]=10;
Series1.data.labels[2] ="Dec";
Series1.data.values[3]=0;
Series1.data.labels[3] ="Jan";
Chart1.draw();Chart1.toImage("img");canvas.style.display="none";
}
</script>
<p>
<BODY onload="draw()">
<img id="img"><canvas id="canvas" width="800" height="400"></canvas>
</html>
You should do that manually setting axis minimum and maximum values, for example:
Chart1.axes.left.setMinMax(4,9);
This is a piece of HTML that demonstrates the problem:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>canvas fillText()</title>
</head>
<body>
<canvas id="canvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "40px sans serif ";
context.lineWidth = 3;
context.strokeStyle = "blue";
context.strokeText("Hello World!", 40, 40);
context.fillStyle = "black";
context.fillText("Hello World!", 40, 80);
</script>
</body>
</html>
While other browsers show both the outlined and solid text, FF27 does not render the text using fillText().
Any suggestions? Thanks.
I am unable to comment due to reputation limitations, but I am running into the same issue :(. Unable to draw filled text in Firefox 27.0.1 on Windows 7 Pro SP1. I tried changing the fillStyle property to '#000', '#000000', 'black', 'rgb(0,0,0)', 'rgba(0,0,0,.8)'. I also attempted to use the deprecated functions 'mozDrawText' and 'mozPathText', both of which have been removed from the API. Please answer your post if you figure out a workaround. For now, I guess I will just call both strokeText and fillText with black, and hope nobody notices the hollow text in Firefox.
Just so you know, I reported this as a bug at:
https://bugzilla.mozilla.org/show_bug.cgi?id=982837
The issue has been resolved in FireFox 30.0, AFAICT.
I've created a PHP file named maps.php that contains a simple Google Maps API that works on the iPad's default browser.
But when I call it using Ajax, the page loads itself but not the map. If I open the link in a desktop or mobile browser it works fine.
You can show google maps by accessing google's javascript api.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Or you can load any php page directly in webView by using window.location="http://www.mourady.me/alhokair/iphone/maps.php" javascript method, as your php page contain google map in canvas tag, you can not load that in div through ajax call, better way used iframe tag to the job.
<html>
<body onload="bodyload()">
<button onclick="bodyload()">Ajax call</button>
<iframe id="mapDiv" height=500px width=700px src="http://www.mourady.me/alhokair/iphone/maps.php"></iframe>
</body>
</html>