I am using kineticjs to do some HTML5 graphics, and I would like to make a rounded corner on a polygon. How can I do this? At the moment I have this polygon:
var poly = new Kinetic.Polygon({
points: [50, 100, 180, 100, 180, 120, 200, 120, 200, 180, 50, 180, 50, 100],
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 1
});
Please note that I want the lower left corner to be a rounded corner with a radius of 10. How can I do that?
Use Kinect.Shape instead
var poly = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
var radius=10;
context.beginPath();
context.moveTo(50, 100);
context.lineTo(180, 100);
context.lineTo(180, 120);
context.lineTo(200, 120);
context.lineTo(200, 180);
//context.lineTo(50, 180);
context.arcTo(50, 180, 50, 180-radius, radius);
context.closePath();
canvas.fillStroke(this);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 1
});
Related
I created a html page. this page displayed circle with svg path and also a png file included in this page. now i want to download this page as pdf file. so please help me.
I used javascript codes but not satisfied.
<html> <script src="http://parall.ax/parallax/js/jspdf.js"></script>
<canvas id="myCanvas" width="578" height="200"></canvas>
**<img src="bodysmall.png" id="m">**
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// only jpeg is supported by jsPDF
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save("download.pdf");
</script>
Is there a simple way to "stamp" a transparent section from within another shape (or layer) using KineticJS?
For example, using the following code:
var stage = new Kinetic.Stage({
container: 'canvas',
width: 100,
height: 100
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 1,
y: 1,
width: 96,
height: 96,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
layer.add(rect);
var star = new Kinetic.Star({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
numPoints: 5,
innerRadius: 15,
outerRadius: 40,
fill: 'yellow'
});
layer.add(star);
stage.add(layer);
How would I make the star shape within the green box transparent so that elements behind the canvas are visible. Here's an example fiddle: http://jsfiddle.net/ZPVxa/
I have looked into filters, and I think that may be the way to go, but I can't seem to find what I'm looking for in the documentation.
You can use a Kinetic Shape Object to do custom drawing, including your star cut-out
The Shape gives you access to a context which gives you access to the full range of canvas operations.
The operation needed for “cutting” your star from your background is globalCompositeOperation.
The “destination-out” composite will cut out the next drawn shape (your star) from any existing drawings (your green rect).
Here is how you draw the green rect and use composition to cut out the star.
var rect = new Kinetic.Shape({
drawFunc: function(canvas){
context=canvas.getContext("2d");
context.save();
context.beginPath();
context.rect(0,0,96,96);
context.fillStyle="green";
context.fill();
context.globalCompositeOperation="destination-out";
drawStar(context,45,50,5,40,15);
canvas.fillStroke(this);
context.restore();
},
width: 96,
height: 96,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
Since the star is not a native canvas shape, you will also need this code to draw a star:
function drawStar(ctx,cx,cy,spikes,outerRadius,innerRadius){
var rot=Math.PI/2*3;
var x=cx;
var y=cy;
var step=Math.PI/spikes;
ctx.strokeSyle="#000";
ctx.beginPath();
ctx.moveTo(cx,cy-outerRadius)
for(i=0;i<spikes;i++){
x=cx+Math.cos(rot)*outerRadius;
y=cy+Math.sin(rot)*outerRadius;
ctx.lineTo(x,y)
rot+=step
x=cx+Math.cos(rot)*innerRadius;
y=cy+Math.sin(rot)*innerRadius;
ctx.lineTo(x,y)
rot+=step
}
ctx.lineTo(cx,cy-outerRadius)
ctx.closePath();
ctx.fill();
}
That’s pretty much it!
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/VVrZT/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.3.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
var rect = new Kinetic.Shape({
drawFunc: function(canvas){
context=canvas.getContext("2d");
context.save();
context.beginPath();
context.rect(0,0,96,96);
context.fillStyle="green";
context.fill();
context.globalCompositeOperation="destination-out";
drawStar(context,45,50,5,40,15);
canvas.fillStroke(this);
context.restore();
},
width: 96,
height: 96,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
layer.add(rect);
layer.draw();
function drawStar(ctx,cx,cy,spikes,outerRadius,innerRadius){
var rot=Math.PI/2*3;
var x=cx;
var y=cy;
var step=Math.PI/spikes;
ctx.strokeSyle="#000";
ctx.beginPath();
ctx.moveTo(cx,cy-outerRadius)
for(i=0;i<spikes;i++){
x=cx+Math.cos(rot)*outerRadius;
y=cy+Math.sin(rot)*outerRadius;
ctx.lineTo(x,y)
rot+=step
x=cx+Math.cos(rot)*innerRadius;
y=cy+Math.sin(rot)*innerRadius;
ctx.lineTo(x,y)
rot+=step
}
ctx.lineTo(cx,cy-outerRadius)
ctx.closePath();
ctx.fill();
}
</script>
</body>
</html>
I know you can draw a wedge using a Kinetic.Wedge:
var compassArc = new Kinetic.Wedge({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
angleDeg: 60,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
rotationDeg: -90
});
This draws a "pizza slice" with a black outline around the whole thing. I just want the "crust" of the pizza, with no straight lines coming back to the center of the circle. How can I do this?
Setting the fill to null removes the red but leaves the outline.
How about creating a custom shape fot this using arc?
http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
Please keep in mind that not to close path and not to fill strokes. if so, you will get what you want. It is a KineticJS object, so that you can drag around if you want.
Here is the working example.
http://jsfiddle.net/bighostkim/WzxxH/
var arc = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
var x = stage.getWidth() / 2;
var y = stage.getHeight()/2;
var radius = 70;
var startAngle = 1 * Math.PI;
var endAngle = 0 * Math.PI;
var context = canvas.getContext('2d');
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, false);
//context.closePath();
canvas.stroke(this);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable:true
});
allenhwkim answer is a bit outdated and has some problems. For example the kinetic dash array would not work. So here is a revised version:
var arc = new Kinetic.Shape({
x: 100,
y: 100,
stroke: '#000',
strokeWidth: 4,
dash: [8, 4],
drawFunc: function(context) {
var radius = 50;
var startAngle = 1 * Math.PI;
var endAngle = 0 * Math.PI;
context.beginPath();
context.arc(0, 0, radius, startAngle, endAngle, false);
context.fillStrokeShape(this);
},
draggable:true
});
There is a Kinetic.Arc class which you can use.
Make outerRadius equal to innerRadius and you will get what you want.
this.arc = new Kinetic.Arc({
innerRadius: 90,
outerRadius: 90,
stroke: 'red',
strokeWidth: 2,
angle: 60,
rotationDeg: 210
});
How can I integrate globalCompositeOperation(or any other plugin which will give me 'multiply' color manipulation) into jCanvas jQuery plugin?
// How do I get this working? //
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'darker';
// With this - //
$("canvas").drawArc({
fillStyle: "#c7302a",
x: 100, y: 100,
radius: 50
});
$("canvas").drawArc({
fillStyle: "#395797",
x: 170, y: 100,
radius: 50,
opacity: 1
});
For the record, jCanvas has a compositing property, the value for which maps to ctx.globalCompositeOperation.
$("canvas").drawArc({
fillStyle: "#c7302a",
x: 100, y: 100,
radius: 50,
compositing: 'darker'
});
-Caleb
Okay I solved it. After struggling with it for hours, it was too simple:
I used context blender plugin.
JS code:
$("#canvasReal").drawArc({ // Draw on the real canvas
fillStyle: "#c7302a",
x: 100, y: 100,
radius: 50
});
$("#canvasOff").drawArc({ // Draw on the off screen canvas
fillStyle: "#395797",
x: 150, y: 100,
radius: 50
});
// Blend off-screen canvas onto the real canvas
var over = canvasOff.getContext('2d');
var under = canvasReal.getContext('2d');
over.blendOnto(under,'multiply');
HTML code:
<canvas width="500" height="250" id="canvasReal"></canvas>
<canvas width="500" height="250"id="canvasOff" style="display:none;"></canvas>
I need to draw a shape then add shadow but shadow is over the filled color I need it to be under it .. I can't explain the situation well so here is an example on jsfiddle
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = "#8ED6FF";
context.strokeStyle = "#0000ff";
context.shadowColor = "#000000";
context.shadowBlur = 2;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.fill();
context.stroke();
http://jsfiddle.net/j8u8p/ thx
http://jsfiddle.net/j8u8p/11/
Note: All I did was rearrange the context calls and add in a globalCompositeOperation
p.s. this looks nicer: http://jsfiddle.net/j8u8p/13/
p.p.s this is tweaked because you moaned about the gap: http://jsfiddle.net/j8u8p/16/