I have to make a tutorial about horse riding using HTML and CSS. Although I am only a beginner, everything has been going more or less smoothly until I had to draw some images.
As you can see from the code, Canvas_1 is the biggest canvas and within its borders I have two smaller canvases, Canvas_2 and myCanvas. I need image preponsko.png to appear on myCanvas and image dresurno.png to appear on Canvas_2. The images have been scaled to fit the canvas.
When I run the complete code, only the second function, for the image dresurno.png, is working and I can see the photo within the canvas borders. The first photo does not appear.
When I delete the second function, first function which draws image preponsko.png works and the image appears. This leads me to conclusion that something in the script part of the code is wrong, but I just can't figure it out. All help is appreciated.
<!DOCTYPE HTML>
<HTML>
<!-- background for the whole page -->
<div id="bg">
<img src="pozadine/pozadina_konji_slajdovi.png" alt="">
</div>
<HEAD>
<link rel="stylesheet" href="css/stil_slajdovi.css">
<link rel="stylesheet" href="css/stil.css">
<meta charset="UTF-8">
</HEAD>
<BODY>
<!-- Canvas_1 - biggest canvas, within its borders are two smaller canvases, Canvas_2 and myCanvas, are positioned -->
<canvas id="Canvas_1" width="1340" height="618" style="position:absolute; left:10px; top:8px; border:solid red;"></canvas>
<canvas id="myCanvas" width="212" height="170" style="position:absolute; left:260px; top:140px; border:3px solid red;"></canvas>
<img id="rsz" width="0" height="0" src="slike/preponsko.png" alt="">
<canvas id="Canvas_2" width="220" height="220" style="position:absolute; left:280px; top:380px; border:3px solid red;"></canvas>
<img id="res_2" width="0" height="0" src="slike/dresurno.png" alt="">
<a id="button_nazad" href="d_saddle_information.html" class="action-button shadow animate blue" style="position:absolute; left:171px; top:589px;">Back</a>
<a id="button_naprijed" href="f_saddle_endurance_western.html" class="action-button shadow animate yellow" style="position:absolute; left:1058px; top:589px;">Forward</a>
<SCRIPT>
<!-- first function that should draw the "slike/preponsko.png" image -->
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = document.getElementById("rsz");
context.drawImage(img, 0,0);
}
<!-- second function that should draw the "slike/dresurno.png" image -->
window.onload = function() {
var canvas = document.getElementById("Canvas_2");
var context = canvas.getContext("2d");
var img = document.getElementById("res_2");
context.drawImage(img, 0,0);
}
</SCRIPT>
</BODY>
Problem is simple to solve.
You have overwritten the window.onload function with a second function.
You have
window.onload = function(){ ...
Then below that you set the same property with a second function
window.onload = function(){ // second function
window.onload can only hold one reference and that will be to the second function.
You can fix it by just defining one function to do everything,
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img1 = document.getElementById("rsz");
context.drawImage(img1, 0,0);
canvas = document.getElementById("Canvas_2");
context = canvas.getContext("2d");
var img2 = document.getElementById("res_2");
context.drawImage(img2, 0,0);
}
or better is to create two render functions and call them from the one onload event
// waits for page to load
window.onload = function() {
renderImage("Canvas_1", "rsz"); // draw first image
renderImage("Canvas_2", "res_2"); // draw second image
}
// gets a canvas with id = canvasId and draws the image with id = imageId
function renderImage(canvasId, imageId){
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext("2d");
const img = document.getElementById(imageId);
ctx.drawimage(img,0,0);
}
Related
I'm trying to use canvas object on iPad; the user need to draw a free curve with the finger and when he releases the finger the system must close the curve and fill it.
Actually I wrote down the following code but the problem is that it draws but it does not close the path on finger release.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=768px, maximum-scale=1.0" />
<title>sketchpad</title>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load',function(){
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'imp_02.jpg';
context.drawImage(img,0,0,600,600);
var colorPurple = "#cb3594";
context.strokeStyle=colorPurple;
context.lineWidth = 5;
context.fillStyle = "red";
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
touchstart: function(coors){
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function(coors){
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function(coors){
if (this.isDrawing) {
context.touchmove(coors);
context.closePath();
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event){
// get the touch coordinates
var coors = {
x: event.targetTouches[0].pageX,
y: event.targetTouches[0].pageY
};
// pass the coordinates to the appropriate handler
drawer[event.type](coors);
}
// attach the touchstart, touchmove, touchend event listeners.
canvas.addEventListener('touchstart',draw, false);
canvas.addEventListener('touchmove',draw, false);
canvas.addEventListener('touchend',draw, false);
// prevent elastic scrolling
document.body.addEventListener('touchmove',function(event){
event.preventDefault();
},false); // end body.onTouchMove
},false); // end window.onLoad
</script>
<style type="text/css"><!--
body{margin:0;padding:0; font-family:Arial;}
#container{position:relative;}
#sketchpad{ border: 1px solid #000;}
--></style>
</head>
<body>
<div id="container">
<canvas id="sketchpad" width="766" height="944">
Sorry, your browser is not supported.
</canvas>
</div>
</body>
</html>
I don't understand what I missed.
Is there anyone who can help me..... I would appreciate a lot!!
You are fetching the touch end co-ordinates from a wrong array.
event object has one more array called changedTouches where you can find the co-ordinates of the point where the touch ended. These end co-ordinates are not in targetTouches array.
So you need
endCoordX = event.changedTouches[0].pageX;
endCoordY = event.changedTouches[0].pageY;
[modify the above code to fit into your scenario. hope you got the concept.... And seriuosly i too got stuck on the same point in the past and wasted more than an hour to know this fact....]
I have a canvas element on my page. I draw an image over it and some data that the user entered. On a press of a button I want to send the canvas to printer, to print it on paper. I tried to use this plug-in: jQuery.printElement, like that:
the button code:
PRINT
'print_voucher()' function:
function print_voucher()
{
$("#canvas_voucher").printElement();
}
canvas_voucher is the ID of my canvas element. It printed the page, but didn't print the canvas. I tried to use it like that as well:
$("#canvas_voucher img").printElement();
But that didn't even start the printer.
So how can I do that? How can I print the content of the canvas?
**EDIT**
Here's the code that creates my canvas and tries to create an image with it:
function create_voucher(visitor_name, visitor_identity_num, unique_number)
{
var canvas = $("#canvas_voucher")[0];
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
// Draw image
var img = new Image();
img.src = 'https://someurl.com/image.jpg';
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.fillStyle="#CCC";
ctx.font="bold 20px Arial";
ctx.fillText(visitor_name, 750, 270);
ctx.fillText(visitor_identity_num, 750, 295);
ctx.font="bold 25px Arial";
ctx.fillText(unique_number, 620, 325);
}
var voucher = canvas.toDataURL("image/png");
$("#voucher_img").attr("src", voucher);
} else {
alert('You need Safari or Firefox 1.5+ to see this.');
}
}
This will convert the canvas to a .png image URL and open it in a new browser window
The Print Dialog is triggered to let the user print the page.
function print_voucher(){
var win=window.open();
win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
win.print();
win.location.reload();
}
Here is example code:
<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();
function print_voucher(){
var win=window.open();
win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
win.print();
win.location.reload();
}
$("#printVoucher").click(function(){ print_voucher(); });
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br>
<button id="printVoucher">Print</button>
</body>
</html>
Found the problem and fixed it.
Apparently it was a security issue at this line:
img.src = 'https://someurl.com/image.jpg';
Once it was pointing out to a server, it was considered as a potential security threat. So I changed it to:
img.src = 'images/image.jpg';
After that I created a function to make an image from the canvas and called it within the 'img.onload' part:
...
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.fillStyle="#CCC";
ctx.font="bold 20px Arial";
ctx.fillText(visitor_name, 750, 270);
ctx.fillText(visitor_identity_num, 750, 295);
ctx.font="bold 25px Arial";
ctx.fillText(unique_number, 620, 325);
draw_voucher_img();
...
function draw_voucher_img()
{
var canvas = $("#canvas_voucher")[0];
var voucher = canvas.toDataURL();
$("#voucher_img").attr("src", voucher);
}
Now it worked!
I have checked this code from my w3schools where its working well.
But when I run this code in my browser, it's not working.
The image does not get displayed in the canvas. Also, I tried the same code in w3schools browser somewhere else, but still it's not working in that browser either.
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="flower.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
I would use the image directly, instead of taking it out of the <img>-tag
var c = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 10, 10);
};
imageObj.src = 'flower.jpg';
The problem is that load of an image is asynchronous, so your Javascript code might run before the image finish his loading. Because of that when ctx.drawImage(img, 10, 10) is called img have no complete data and draws nothing on canvas.
To solve that you need to wait the image to completely load. Javascript give you the ability to setup a function to run when an image is completely loaded.
All code that depends of the image data should be put inside the onload callback.
img.onload = function(){
ctx.drawImage(img,10,10);
}
Your script with the modified parts:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
ctx.drawImage(img,10,10);
}
</script>
If the src is correct doesn't matter if the image is loaded from a html tag or created dynamically in Javascript with new Image(), the onload method works for both.
You probably need to run the javascript on load, rather than directly in body. Change you javascript into this and it should work (at least it does in this fiddle):
function setup_canvas() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
}
window.onload = setup_canvas;
Also, as described in this thread explicitly setting window.onload is not a very good practice, as it might be overwritten by subsequent scripts, so for anything other than testing you would want to use a framework or addEventListener/attachEvent.
What is wrong with this code? :S.. My canvas stays empty. Image URL is correct and image loads.
This is my engine.js file:
var canvas;
var stage;
function init()
{
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
playerImg = new Image();
playerImg.src = 'img/player/walkingbl.png';
playerImg.onload = onPlayerLoaded;
Ticker.setFPS(30);
Ticker.addListener(window);
}
function tick()
{
stage.update();
}
function onPlayerLoaded()
{
console.log(playerImg);
player = new Bitmap(playerImg);
player.x = 300;
player.y = 450;
stage.addChild(player);
console.log('Player added to stage');
}
$(document).ready(function(){
init();
});
And this is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Game Engine</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id='container'>
<canvas id='#canvas' width='1000' height='350'></canvas>
</div>
<script src="js/jquery.js"></script>
<script src="js/easel.js"></script>
<script src='js/engine.js'></script>
</body>
I'm new to the whole easel.js and never did anything with Flash or actionscript. I'm an PHP developer by heart, so this is a pretty big transition for me. The lack of documentation / tutorials / examples, make it very hard for me to learn how to use easel.js. So if you have any pointers or resources for me to check out. Please share!
This line is wrong:
<canvas id='#canvas' width='1000' height='350'></canvas>
The ID doesnt need a #. the right line is:
<canvas id='canvas' width='1000' height='350'></canvas>
but I wouldnt use the word "canvas" as an identifier, as it could be confused with the tag. Better use:
<canvas id='mycanvas' width='1000' height='350'></canvas>
and change the JS code:
canvas = document.getElementById("mycanvas");
I have a question related to HTML5 canvas.
I am developing a game that requires the users to draw an image on the canvas.
The tools contain Text and Rectangle tools etc...
The color default value of the Text and Rectangle tools is black. So I have added more colors so the user can change the color of the font and the rectangle.
The problem is that: in the first time of using the tool, when the color is clicked the font's color remains black but if the user uses the text tool again, the font's color changed according to the selected color and the same with the rectangle, it is filled with black color first then when the user draws another rectangle. the color changed from black to the selected color.
How can I change the default value from the beginning???
Edited::
ok her is my code:
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#clr div{
cursor:pointer;
cursor:hand;
width:20px;
height:20px;
float:left;
margin-right:10px;
}
#clr2 font{
cursor:pointer;
cursor:hand;
margin-top:100px;
margin-right:10px;
}
#clr3 font{
cursor:pointer;
cursor:hand;
margin-top:100px;
margin-right:10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
// Drawing options
var tool;
var tool_default = '';
function drawLine(){
// Get the tool select input.
var tool_select = document.getElementById('dtool');
if (!tool_select) {
alert('Error: failed to get the dtool element!');
return;
}
tool_select.addEventListener('change', ev_tool_change, false);
// Activate the default tool.
if (tools[tool_default]) {
tool = new tools[tool_default]();
tool_select.value = tool_default;
}
// Attach the mousedown, mousemove and mouseup event listeners.
layer3.addEventListener('mousedown', ev_canvas, false);
layer3.addEventListener('mousemove', ev_canvas, false);
layer3.addEventListener('mouseup', ev_canvas, false);
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas (ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
// The event handler for any changes made to the tool selector.
function ev_tool_change (ev) {
if (tools[this.value]) {
tool = new tools[this.value]();
}
}
// This object holds the implementation of each drawing tool.
var tools = {};
// The drawing pencil.
//Draw Rectangle
tools.rectangle = function () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
context3.fillStyle="";
};
this.mousemove = function (ev) {
if (!tool.started) {
return;
}
var x = Math.min(ev._x, tool.x0),
y = Math.min(ev._y, tool.y0),
w = Math.abs(ev._x - tool.x0),
h = Math.abs(ev._y - tool.y0);
context3.clearRect(0, 0, layer3.width, layer3.height);
if (!w || !h) {
return;
}
$("#clr div").click(function(){
context3.fillStyle = $(this).css("background-color");
});
context3.fillRect(x, y, w, h);
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
<canvas class="canvas3" id="layer3" width="500" height="200" style="border:1px solid"> </canvas>
<p><label> Drawing tool: <select id="dtool" onClick="drawLine()">
<option value="pencil">Pencil</option>
<option value="rectangle">Rectangle</option>
</select></label></p>
<div id="clr">
<p> </p>
<div style="background-color:white;"> </div>
<div style="background-color:red;"> </div>
<div style="background-color:green;"> </div>
<div style="background-color:orange;"> </div>
<div style="background-color:brown;"> </div>
<div style="background-color:#d2232a;"> </div>
</div>
</div>
<script type="text/javascript">
layer3 = document.getElementById("layer3");
context3 = layer3.getContext("2d");
</script>
</body>
</html>
You have to set the fillStyle before you call drawText, and it sounds like you are setting it afterwards.
Edit: In short it is happening because:
$("#clr div").click(function(){
context3.fillStyle = $(this).css("background-color");
});
Is put inside your mousemove. This means that this never gets to be attached until a mouseMove happens.
Instead, put the above code at the top level and not inside of your mousemove