I have this code and successfully croped the left corner , but I need to crop all 4 corners of this image ,can it be done with the same object?
I have this code and successfully croped the left corner , but I need to crop all 4 corners of this image ,can it be done with the same object?
the croped image
//Global variables
var myImage = new Image(); // Create a new blank image.
// Load the image and display it.
function displayImage() {
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext) {
// Specify 2d canvas type.
ctx = canvas.getContext("2d");
// When the image is loaded, draw it.
myImage.onload = function() {
// Load the image into the context.
ctx.drawImage(myImage, 0, 0);
// Get and modify the image data.
changeImage();
}
// Define the source of the image.
myImage.src = "ice.jpg";
}
}
function changeImage() {
ctx.strokeStyle = "white";
ctx.lineWidth = "70";
ctx.beginPath();
ctx.arc(0,0,10,0*Math.PI,0.5*Math.PI);
ctx.closePath();
ctx.stroke();
}
</script>
</head>
<body onload="displayImage()">
<canvas id="myCanvas" width="200" height="200">
</canvas>
</body>
</html>
Kind of what #AndreaBogazzi says, but kind of not...
Yes, you can draw all 4 of the corner cutouts using a single path.
This is done by drawing a cutout circle and then picking up the "brush" and moving it to the center of the next cutout.
You must pick up the brush or otherwise you will get a line drawn that connects the centerpoints of each cutout circle.
Begin a single path: ctx.beginPath()
Draw an arc: ctx.arc(0,0,cutRadius,0,Math.PI*2)
Pick up the "brush" and move it to the center of the next arc: ctx.moveTo(w,0)
Draw an arc: ctx.arc(w,0,cutRadius,0,Math.PI*2)
Pick up the "brush" and move it to the center of the next arc: ctx.moveTo(w,h)
Draw an arc: ctx.arc(w,h,cutRadius,0,Math.PI*2)
Pick up the "brush" and move it to the center of the next arc: ctx.moveTo(0,h)
Draw an arc: ctx.arc(0,h,cutRadius,0,Math.PI*2)
Fill all 4 cutout circles: ctx.fill()
Note: since the "brush" begins at [0,0] you don't have to moveTo(0,0) after step#1.
Example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var cutRadius=10;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/reef.jpg";
function start(){
cw=canvas.width=img.width;
ch=canvas.height=img.height
ctx.drawImage(img,0,0);
changeImage();
}
function changeImage() {
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(0,0,cutRadius,0,Math.PI*2);
ctx.moveTo(cw,0);
ctx.arc(cw,0,cutRadius,0,Math.PI*2);
ctx.moveTo(cw,ch);
ctx.arc(cw,ch,cutRadius,0,Math.PI*2);
ctx.moveTo(0,ch);
ctx.arc(0,ch,cutRadius,0,Math.PI*2);
ctx.fill();
}
<canvas id="canvas" width=300 height=300></canvas>
You have to manually draw the four quarter circle:
//Global variables
var myImage = new Image(); // Create a new blank image.
// Load the image and display it.
function displayImage() {
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext) {
// Specify 2d canvas type.
ctx = canvas.getContext("2d");
// When the image is loaded, draw it.
myImage.onload = function() {
canvas.width = myImage.width;
canvas.height = myImage.height;
// Load the image into the context.
ctx.drawImage(myImage, 0, 0);
// Get and modify the image data.
changeImage(myImage.width, myImage.height);
}
// Define the source of the image.
myImage.src = "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg";
}
}
function changeImage(w,h) {
var r = 70;
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.arc(0,0,r,0*Math.PI,0.5*Math.PI);
ctx.moveTo(0,r);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(w,0,r, -0.5*Math.PI,-1*Math.PI);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(0,h);
ctx.arc(0,h,r, -0.5*Math.PI,0*Math.PI);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(w,h);
ctx.arc(w,h,r, -1*Math.PI,-0.5*Math.PI);
ctx.closePath();
ctx.fill();
}
displayImage();
<canvas id="myCanvas" width="200" height="200">
</canvas>
Related
When panning in the first canvas, things work like expected. When panning in the second canvas, it doesn't work like expected. I expected both to work the same. The second globe spins rapidly after a little bit of panning, the first globe keeps the cursor on the same coordinates.
https://codepen.io/tonytrupe/pen/jOqjGvE
class UI {
constructor(canvas) {
var width = canvas.width,
height = canvas.height;
//set projection type here, geoOrthographic, geoWinkel3
var projection = d3
.geoWinkel3()
//.scale((Math.min(width, height)) / 2)
.translate([width / 2, height / 2])
//.rotate([0,0,0])
.fitExtent(
[
[6, 6],
[width - 6, height - 6]
],
{
type: "Sphere"
}
);
draw();
//this.addZoomPan = function () {
d3
.geoZoom()
.northUp(true)
.projection(projection)
.onMove(draw)(canvas);
//};
function draw() {
var ctx = canvas.getContext("2d");
var path = d3.geoPath().context(ctx).projection(projection);
// Store the current transformation matrix
ctx.save();
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
ctx.restore();
var border = {
type: "Sphere"
};
ctx.beginPath();
path(border);
ctx.strokeStyle = "#000";
ctx.stroke();
var lat = 45;
var lon = 45;
var graticule = d3.geoGraticule().step([lat, lon]);
ctx.beginPath();
path(graticule());
ctx.strokeStyle = "#000";
ctx.stroke();
}
}
}
//var one = new UI(document.getElementById("one"));
//var two = new UI(document.getElementById("two"));
var three = new UI(document.getElementById("three"));
html
<html>
<script src="//d3js.org/d3.v6.js"></script>
<script src="//d3js.org/d3-geo.v2.min.js"></script>
<script src="//d3js.org/d3-geo-projection.v3.min.js"></script>
<script src="//unpkg.com/d3-geo-zoom"></script>
<!--removing all but the last canvas element makes things work as expected-->
<canvas id="one" class="canvas" width="320" height="200"></canvas>
<canvas id="two" class="canvas" width="320" height="200"></canvas>
<canvas id="three" class="canvas" width="320" height="200"></canvas>
</html>
https://github.com/vasturiano/d3-geo-zoom/issues/12
It previously wasn't getting pointer location relative to the node element. Now it is.
const pointers = d3Pointers(zoomEv, nodeEl);
https://github.com/vasturiano/d3-geo-zoom/blob/86da0d98f267a838a4715abec60e4a278ace2121/src/geoZoom.js#L59
I can draw gauge chart by canvas with function arc(). But, the shape is a half of circle.
Now, I'd like to draw gaugle chart like this (please ignore color or number).
How can I draw it? Thanks
UPDATE:
I draw the chart by drawing 2 arc (I don't use ctx.lineWidth)
var min=Math.PI*.60;
var max=Math.PI*2+Math.PI*.40;
var R = 100;
var arcWidth = 40;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, R-arcWidth, max, min, true);
ctx.arc(100, 100, R, min, max);
ctx.fillStyle = "red";
ctx.fill();
http://jsfiddle.net/b0nw4gma/
However, at position of min and max, chart is line instead of round. I tried to use ctx.lineCap='round', but it not work.
Just stroke an arc with a sweep-angle based on your desired gauge percentage.
In your example the 0% angle is (estimating...)
PI * 0.60
and your 100% angle is (again estimating...)
PI*2 + PI*.40
So your arc will always start at angle = PI*0.60.
Your arc will end at the angle calculated like this:
zeroAngle + (hundredAngle-zeroAngle) * guagePercentageValue
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var PI=Math.PI;
var PI2=PI*2;
var cx=150;
var cy=150;
var r=80;
var min=PI*.60;
var max=PI2+PI*.40;
var percent=50;
ctx.lineCap='round';
ctx.font='24px verdana';
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillStyle='gray';
$myslider=$('#myslider');
$myslider.attr({min:0,max:100}).val(50);
$myslider.on('input change',function(){
percent=parseInt($(this).val());
drawGuage();
});
drawGuage();
function drawGuage(){
ctx.clearRect(0,0,cw,ch);
// draw full guage outline
ctx.beginPath();
ctx.arc(cx,cy,r,min,max);
ctx.strokeStyle='lightgray';
ctx.lineWidth=15;
ctx.stroke();
// draw percent indicator
ctx.beginPath();
ctx.arc(cx,cy,r,min,min+(max-min)*percent/100);
ctx.strokeStyle='red';
ctx.lineWidth=6;
ctx.stroke();
ctx.fillText(percent+'%',cx,cy);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id=myslider type=range><br>
<canvas id="canvas" width=300 height=300></canvas>
i am trying to add add text (water mark) in canvas generated image
here is my code.
html2canvas($("#frame"), {
onrendered: function (canvas) {
$("#outputImage").html(canvas);
}
what i should add in this code to add watermark mark in generated image
Inside the handler do the following:
html2canvas($("#frame"), {
onrendered: function (canvas) {
var ctx = canvas.getContext("2d"); // get 2D context of canvas
ctx.textBaseline = "top"; // start with drawing text from top
ctx.font = "20px sans-serif"; // set a font and size
ctx.fillStyle = "red"; // set a color for the text
ctx.fillText("WATERMARK", 20, 20); // draw the text at some position (x, y)
$("#outputImage").html(canvas);
}
}
There is also alignment modes using:
ctx.textAlign = "center"; // default: "start" = left-to-right/right-to-left
// depending on language, override with "left" or "right"
Check out Canvas.globalCompositeOperation. If you set it to the string 'lighter', it will lighten the pixels drawn by the next drawing command (such as fillText()). Here's a sample
<canvas id='canvas'></canvas>
<script>
var img = new Image();
img.src = 'http://www.javascripture.com/pic.jpg';
img.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, canvas.width, canvas.height);
// Draw the Watermark
context.font = '48px sans-serif';
context.globalCompositeOperation = 'lighter';
context.fillStyle = '#444';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('watermark', canvas.width / 2, canvas.height / 2);
};
</script>
Im trying to get canvas to work, what i'm trying to do is make an image(from an existing image) and place a text on it. I want the text to be rotated on the left side of the image. The moment i try to rotate the text, i can't see it anymore in the canvas. Im using the following solution:
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
ctx.save();
ctx.rotate(-0.5*Math.PI);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", 0, 0);
ctx.restore();
var image = canvas.toDataURL("image/jpeg");
With this solution i cannot see the text anymore. When i delete the rotation and make the code into the following, everything works fine the image is rendered and the text is rendered on the image.
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
ctx.rotate(-0.5*Math.PI);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", 0, 0);
var image = canvas.toDataURL("image/jpeg");
Can anyone see the mistake im making, or does someone have a solution to this problem of mine?
[edit]
I've made a jsfiddle showing the problem http://jsfiddle.net/7kzuN/4/
Before rotating you should always set the rotation point.
Think of the rotation point as a pencil-tip pressed on on a piece of paper.
When you rotate, the paper will rotate around the point of the pencil-tip.
You set the rotation point using context.translate(x,y).
To rotate on the left side of the image, you would translate something like this:
// set the rotation point
ctx.translate(6,img.height/2);
This sets your rotation point 6 pixels off the left side and at the vertical-center of the image.
Here's example code and a demo: http://jsfiddle.net/m1erickson/ANpPm/
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/houseIcon.png";
function start(){
canvas.width=img.width;
canvas.height=img.height;
// draw the image
ctx.drawImage(img,0,0);
// save the unrotated context
ctx.save();
// set the rotation point with translate
ctx.translate(6,img.height/2);
// rotate by -90 degrees
ctx.rotate(-0.5*Math.PI);
// draw the copyright bar
ctx.fillStyle="black";
ctx.fillRect(-img.height/2,-6,img.height,14);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", -img.height/2+5,-6);
// restore the context to its unrotated state
ctx.restore();
// save the image+text to a dataURL
var image = canvas.toDataURL("image/jpeg");
}
I have it so that you can draw under the image, but you must start drawing outside of the image border and move under the image. So you can't start right on the image. How do I fix this?
My html is just:
<canvas id="canvas"></canvas>
<img id="html5" src="http://i.imgur.com/Wpx3Vum.png" style="position:absolute;left:100px;top:15px;" />
You can use two canvas elements instead:
Put two canvas elements on top of each other
Draw the image you want to superimpose on the top canvas
Add mouse event listener to the top canvas
When drawing read the positions from top canvas but draw the lines to the bottom one using the bottom canvas' context
(links just meant as examples)
An example of this could be including a simple basic draw function:
Online demo
HTML:
<div id="cont">
<canvas id="canvasBottom" width=400 height=400></canvas>
<canvas id="canvasTop" width=400 height=400></canvas>
</div>
CSS:
#cont {
position:relative;
border:1px solid #777;
height:400px;
}
#cont > canvas {
position:absolute;
left:0;
top:0;
cursor:crosshair;
}
JavaScript:
Load and set the image to top layer:
var img = new Image,
canvas = document.getElementById('canvasBottom'),
canvasTop = document.getElementById('canvasTop'),
ctx = canvas.getContext('2d'),
ctxMouse = canvasTop.getContext('2d');
img.onload = setup;
img.src = 'http://i.imgur.com/HNiER0v.png';
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgb(0, 100, 255)';
function setup() {
ctxMouse.drawImage(this, 0, 0);
}
Handle mouse:
var px, py, isDown = false;
canvasTop.onmousedown = function (e) {
var pos = getXY(e);
px = pos.x;
py = pos.y;
isDown = true;
}
canvasTop.onmouseup = function () {
isDown = false;
}
canvasTop.onmousemove = function (e) {
if (isDown) {
var pos = getXY(e);
ctx.beginPath();
ctx.moveTo(px, py);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
px = pos.x;
py = pos.y;
}
}
function getXY(e) {
var rect = canvasTop.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
As you can see you can now draw behind the initial drawing:
(Now, if that is not a master piece than I don't know what a master piece is..!)