I tried to create rectangle in canvas, i am bit confused with coordinate system of canvas
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
body{
background-color: #231F20;
}
#ribbonid{
width:90px;
height: 90px;
}
</style>
</head>
<body>
<canvas id='ribbonid' > </canvas>
<script>
$(document).ready(function(){
var $ribbonid = $('#ribbonid');
// get the canvas element using the DOM
var canvas = document.getElementById('ribbonid');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var cts = canvas.getContext('2d');
cts.fillStyle = '#f7911e';
cts.beginPath();
cts.moveTo(0, 0);
cts.lineTo(90, 0);
cts.lineTo(90, 90);
cts.lineTo(0, 90);
cts.lineTo(0, 0);
cts.fill();
cts.closePath();
}
});
</script>
</body>
</html>
http://jsfiddle.net/bkf2e/
i am aware of canvas.rect function, but i need to create some different shape for me.
I created rectangle of size (90,90)(square), but it is creating full square.
I know it may be my simple mistake, but can you please help me on that.
you need to set the size of your canvas using the width and height attributes, if you use css to size it then it will scale the default size rather than becoming the size you want, which is why it was distorted like that.
I've updated your jsfiddle with the attributes set and you'll see that it's now square.
solved problem,
it was silly mistake of width and height attribute
<canvas id='ribbonid' width='90' height='90' > </canvas>
Related
I want to be able to create diagrams and drawings on the fly, using input from the user.
If I have 2 text boxes for width and height, i want to be able to draw a rectangle based on user entered values, if they change the value in the input fields i want the drawing to change.
is canvas capable of this? does it need to work along with javascript?
thanks
Yes, you can listen for text-inputs and issue appropriate canvas drawing commands.
All canvas commands must be issued in javascript...so yes, javascript is required.
Here's annotated code and a Demo: http://jsfiddle.net/m1erickson/f6E6Y/
<!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(){
// get a reference to the canvas and context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// vars for current width and height of a canvas rectangle
var width=50;
var height=35;
// references to the input-text elements
// used to let user change the rect width & height
var $width=document.getElementById('width');
var $height=document.getElementById('height')
// set the initial input-text values to the width/height vars
$width.value=width;
$height.value=height;
// call the draw command
draw();
// listen for keyup events on width & height input-text elements
// Get the current values from input-text & set the width/height vars
// call draw to redraw the rect with the current width/height values
$width.addEventListener("keyup", function(){
width=this.value;
draw();
}, false);
$height.addEventListener("keyup", function(){
height=this.value;
draw();
}, false);
// draw() clears the canvas and redraws the rect
// based on user input
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(40,40,width,height);
}
}); // end $(function(){});
</script>
</head>
<body>
Width:<input type="text" id="width"><br>
height:<input type="text" id="height"><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Im trying to do a composite operation on layers using KineticJS.
Everything works fine in Chrome, but nothing shows for firefox, or IE10
The code runs through without any errors.
You can see the issue here:
http://clients.lilodesign.com/Lilo/Kinetic/
Chrome you should see a circle with a partial bit of the standard MS Blue Trees image showing through. In Firefox and IE10 you just get a blank screen.
You can view the code by viewing the source. Its all in-line and a very simple example to show the issue.
If you remove the following line:
ctx.globalCompositeOperation = "destination-atop";
Then you see the blue trees image with the ellipse on top of it as expected in all three browsers, so the code does "work".
Has anyone else experienced this and found a workaround?
I have searched and tried a couple of suggested solutions such as:
shape intersection with KineticJS
But all these still only seem to work in Chrome.
Any help or pointers would be appreciated.
Thanks
Tyrone.
We used to be able to cheat by grabbing the context of a layer, but now it’s unreliable (as you’ve discovered).
You can still get verrrrry hacky and do it like this: : http://jsfiddle.net/m1erickson/6fTQU/
But don’t ! (Even this hack doesn’t actually work on images with transparent pixels).
Instead, do it the official way by creating a Kinetic custom Shape Object.
Kinetic Shape gives you an official canvas and context to work with.
As a result, the globalCompositeOperation works fine (reliably!).
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/LtxEe/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<style>
body{ background-color: ivory; }
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img=new Image();
img.onload=function(){
buildLayer(img);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
function buildLayer(img){
var myShape=new Kinetic.Shape({
drawFunc:function(canvas){
var ctx=canvas.getContext();
ctx.beginPath();
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation="destination-atop";
ctx.arc(150,150,60,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
canvas.fillStroke(this);
},
x:0,
y:0,
width:img.width,
height:img.height
});
layer.add(myShape);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I need to set up a background canvas with a load of images drawn on at various places. Nothing changes on this background, so I want to do it all at once. I think I know how to do that. Then each frame I want to copy that background canvas (ultimately just a part of it) to my main screen canvas people see.
I am doing the following:
g_CanvasScreen = document.getElementById("m_Canvas");
g_CanvasScreenContext = g_CanvasScreen.getContext("2d");
g_OffScreenBackground = document.createElement("canvas");
g_OffScreenBackgroundContext = g_CanvasScreen.getContext("2d");
I believe this gets the main screen canvas from the hmtl5 page g_CanvasScreen.
I believe g_OffScreenBackground is a newly created canvas in memory.
Once all images have loaded I then draw all the images in the correct places to the background screen by calling the function:
DrawMapToBackground(g_OffScreenBackground, g_OffScreenBackgroundContext, 2000, 1600);
2000 x 1600 is the size of the offscreen background.
This then leads to the thing I am not sure about. I believe this will blit the background canvas to the main screen:
g_CanvasScreenContext.drawImage(g_OffScreenBackground,
0, 0, g_OffScreenBackground.width, g_OffScreenBackground.height,
screenX, screenY, g_OffScreenBackground.width, g_OffScreenBackground.height);
Is this last function correct? Can I do a canvas to canvas blit? Should I be doing this another way?
Instead of redrawing the background each time, just put 2 canvas’s on top of each other.
First draw the background image once on the bottom canvas.
Then use the top canvas to draw all your “changing” drawings.
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/pSjEt/
<!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>
#container{
position:relative;
border:1px solid blue;
width:500px;
height:300px;
}
.subcanvs{
position:absolute;
width:100%;
height:100%;
}
</style>
<script>
$(function(){
var bk=document.getElementById("background");
var bkCtx=bk.getContext("2d");
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var bkimg=new Image();
bkimg.onload=function(){
bk.width=bkimg.width;
bk.height=bkimg.height;
canvas.width=bkimg.width;
canvas.height=bkimg.height;
bkCtx.drawImage(bkimg,0,0);
draw();
}
bkimg.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/skyGrass.png";
var x=50;
function draw(){
x+=5;
if(x>300){x=50;}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.arc(x,100,30,0,Math.PI*2,false);
ctx.strokeStyle="gold";
ctx.fillStyle="yellow";
ctx.lineWidth=5;
ctx.stroke();
ctx.fill();
setTimeout(draw,1000);
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container">
<canvas id="background" class="subcanvs"></canvas>
<canvas id="canvas" class="subcanvs"></canvas>
</div>
</body>
</html>
I'm also curious to know if this is a best practice.
I load a sprite map:
canvas = $('#GameCanvas')[0];
context = canvas.getContext('2d');
// load sprite map
spriteMap = new Image();
spriteMap.src = "resources/spritemap.png";
Now I've loaded my sprites, I want to draw them on the screen. I can do so by using context.drawImage(..) but:
I don't know if this is the best way, instead of just extracting each image I want and storing them separately eg. var playerCharacter = [cut the image out of the sprite map]
I want to colorise the images. If I pull out a 'white' sprite, I may then want to colorise it red, green, etc. I don't know how to do this yet, but it will probably require creating a new colorised Image so I'd have to pull it out of the spritemap anyway. I don't want to be recolorising constantly.
Any idea the best way of doing this?
Performance using sprites
Phrogz has some useful FPS tests for CSS vs Canvas here: Efficiency of <canvas> and <div>s They are live tests so you can run them in the environments you want to test.
Recoloring sprites
If you want to quickly take your white sprite and create red, green and blue sprites from it, you can use globalCompositeOperation=”source-in” to do that with very little work. Just use an image editor to create a cutout of the part of the image you want to recolor. Then use the code below to automatically create different colored sprites. I did the mask below in Photoshop using the magic want tool – 2 minutes tops!
Original Fish + Mask = Green Fish
Of course, you can create any color you want...even patterns instead of solid colors!
Here’s code. You will probably have to create your own image and mask because of CORS – stupid CORS !!
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
canvas{border:1px solid red;}
#wrapper{ position:relative;}
#overlay,#base{ position:absolute; top:0; left:0;}
</style>
<script>
$(function(){
var canvas=document.getElementById("overlay");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.drawImage(img,0,0,img.width,img.height,0,0,overlay.width,overlay.height);
}
img.src="http://dl.dropbox.com/u/139992952/stackoverflow/fish%20overlay.png";
function draw(red,green,blue) {
ctx.save();
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle="rgb("+red+","+green+","+blue+")";
ctx.beginPath();
ctx.rect(0,0,overlay.width,overlay.height);
ctx.fill();
ctx.restore();
}
$("#red").click(function(){ draw(255,0,0); });
$("#green").click(function(){ draw(0,255,0); });
$("#blue").click(function(){ draw(0,0,255); });
});
</script>
</head>
<body>
<button id="red">Red Fish</button>
<button id="green">Green Fish</button>
<button id="blue">Blue Fish</button>
<div id="wrapper">
<img id="base" src="http://dl.dropbox.com/u/139992952/stackoverflow/fish.png" width=350 height=250>
<canvas id="overlay" width=350 height=250></canvas>
</div>
</body>
</html>
I heard that drawing abilities will be supported by Web 2.0
Tried to find something in Internet about, nothing really clear. Could you please point me into something that allows (or will allow in future) to draw in HTML?
For example: I want to have ability draw few hexagons in different color on the page.
Thanks.
P.S. Sorry if question is a little bit "stupid", but I can't make it more smart.
A quick exemple of what you want to do:
<html>
<head>
<title>Hexagon canvas tutorial</title>
<script type="text/javascript">
function draw(){
//first let's get canvas HTML Element to draw something on it
var canvas = document.getElementById('tutorial');
//then let's see if the browser supports canvas element
if (canvas.getContext){
var ctx = canvas.getContext('2d');
//Pick Hexagon color, this one will be blue
ctx.fillStyle = "rgb(0, 0, 255)";
//let's start a path
ctx.beginPath();
//move cursor to position x=10 and y=60, and move it around to create an hexagon
ctx.moveTo(10,60);
ctx.lineTo(40,100);
ctx.lineTo(80,100);
ctx.lineTo(110,60);
ctx.lineTo(80,20);
ctx.lineTo(40,20);
//fill it and you got your first Hexagon
ctx.fill();
//This one will be green, but we will draw it like the first one
ctx.fillStyle = "rgb(0, 255, 0)";
ctx.beginPath();
ctx.moveTo(110,160);
ctx.lineTo(140,200);
ctx.lineTo(180,200);
ctx.lineTo(210,160);
ctx.lineTo(180,120);
ctx.lineTo(140,120);
ctx.fill();
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
</html>
What you're talking about is most likely the HTML5 Canvas element
I suspect you've been hearing about the Canvas Element. You can get started with it here: http://en.wikipedia.org/wiki/Canvas_element
Good luck!