https://jsfiddle.net/c309a2wo/
html
<canvas id="myCanvas" width="200" height="200"></canvas>
javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0,255,255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "rgb(200,0,0)";
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2);
ctx.fill();
I would like to overlay an image("close_icon.png") onto a canvas in the top right corner when the mouse hovers over the canvas, and is removed again when the mouse leaves the canvas.
Jquery is available, though I couldn't find the option to add it in jsfiddle.
Visualisation:
Is there an easy way to accomplish this? Brownie points if the image can fade-in and out.
The basic idea is to wrap your canvas in a container element, then add an image in the container that is only shown on :hover.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0,255,255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "rgb(200,0,0)";
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2);
ctx.fill();
div {
position: relative;
display: inline-block;
}
canvas {
position: relative;
z-index: -1;
}
img {
position: absolute;
top: 4%;
right: 4%;
opacity: 0;
z-index: 2;
-webkit-transition: opacity 0.4s linear;
transition: opacity 0.4s linear;
}
div:hover img {
opacity: 1;
}
<div>
<canvas id="myCanvas" width="200" height="200"></canvas>
<img src="http://placehold.it/30x30">
</div>
Here'a working JSFiddle.
Wrap canvas it in outer container that has position, then you can position the icon wherever you want relative to the outer wrapper
HTML
<div id="canvas-wrap">
<span id="canvas-icon"></span>
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
CSS
#canvas-wrap{
position:relative;
width:200px; height:200px
}
#canvas-icon{
background:yellow;
width:32px;
height:32px;
position:absolute;
top:10px;
right:10px;
z-index:10;
display:none
}
#canvas-wrap:hover #canvas-icon{
display:block
}
DEMO
You may add the <span class="cross"> using .hover:
$("#myCancas").hover(function(){$( this ).append( $( "<span class="cross"></span>" ) );});
and then style it, using CSS:
span.cross{
display: block;
width: 10px;
height: 10px;
background-image: url( path/to/cross/jpg);
}
Related
PaperJS has documentation how to setup the canvas in to resize the canvas when the window changes dimensions. The same solution can be found in this SO answer.
The problem with this approach is that it will change the coordinates while drawing, and also it will be resizing the canvas, which can be less performant.
I would like to scale the canvas without changing the width of the element. The problem I found is that PaperJS adds a width and height to the canvas element in runtime, and I could not find a way to stop this behaviour, this will result the calculated value when the setup is done, and could be for instance:
width="817" height="817"
Here is an example of a HTML Canvas that behaves the way I intend, and also the PaperJS version which does not scale. Resize the browser window to see how the example in the bottom will stretch the canvas content, but keeping the circle in the center of the canvas.
I would like to find a way to configure PaperJS that would work in the same way, without having to change the draw coordinates inside a onResize handler.
Is this possible?
const SIZE = 150;
window.onload = () => {
// --- Paperjs ---
const canvas = document.getElementById('paper');
paper.setup(canvas);
// draw circle in the center of the view
const c = new paper.Path.Circle(new paper.Point(SIZE, SIZE), SIZE);
c.strokeColor = 'white';
c.strokeWidth = 3;
// --- END Paperjs ---
// --- Canvas ---
const ctx = document.querySelector("#canvas").getContext("2d");
ctx.strokeStyle = "#FFFFFF";
ctx.fillStyle = "white";
ctx.lineWidth = 3;
ctx.beginPath();
// x, y, width
ctx.arc(SIZE, SIZE, SIZE, 0, 2 * Math.PI);
ctx.stroke();
// --- END Canvas ---
}
.wrapper {
margin-left: 10vw;
width: 80vw;
border: 1px solid cyan;
}
.responsive-canvas {
background-color: silver;
max-width: inherit;
max-height: inherit;
height: inherit !important;
width: inherit !important;
object-fit: contain;
}
* {
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.min.js"></script>
<h2>PaperJS</h2>
<div class="wrapper">
<canvas id="paper" class="responsive-canvas" width="300px" height="300px"></canvas>
</div>
<h2>Canvas</h2>
<div class="wrapper">
<canvas class="responsive-canvas" id="canvas" width="300px" height="300px"></canvas>
</div>
I want to stretch the font of a canvas Text object. How can I do this?
Example (before):
Example (after):
How could I implement this?
You can use scaleX to "squish" the text by scaling the text:
// "squish" the text to 60% of its original width
scaleX:0.60
Example code and a Demo
var canvas = new fabric.Canvas('canvas');
var myText = new fabric.Text('NEW TEXT',{
left: 50,
top: 60,
});
canvas.add(myText);
var mySquishedText = new fabric.Text('NEW TEXT',{
left: 50,
top: 100,
scaleX:0.60,
});
canvas.add(mySquishedText);
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>
[Update: #AndreaBogazzi adds that scaleX is better handled than the matrix ops]
I was wondering if it's possible to clone an HTML element into canvas. So looking at this JSFiddle, how would you duplicate it into canvas?
I've seen ways to draw DOM objects into a canvas element, but I was curious if there was a way to do it differently.
<p>Html</p>
<div id="clone-me">
<div id="square">
</div>
</div>
<p>Canvas</p>
<canvas width="200" height="200"></canvas>
#clone-me {
width: 200px;
height: 200px;
background: #333;
}
#square {
width: 70px;
height: 70px;
background: red;
}
You can use html2canvas to do it, you can checkout the demo at this JSFiddle.
html2canvas(document.getElementById('clone-me'), {
onrendered: function(canvas) {
var canvas1 = document.getElementById('canvas1');
var ctx = canvas1.getContext('2d');
ctx.drawImage(canvas, 0, 0);
}
});
I wanted to draw the circular canvas and wanted to download the canvas with same format. Following is css which i am using
canvas {
width: 20em;
height: 20em;
border-radius: 50%;
background-color: red;
border: 4px solid #fff;
box-shadow: 0 0 0 5px red;
}
At present i have just apply the css to canvas to look a like it will not print same in fabric js.
Is there any possible way? Because i am trying to create circular canvas and add text and wanted to print same canvas with text and styling.
Edit:
Is it possible to draw the circle with same styling in fabric.js
You cannot really have a circular canvas in fabricjs, but you can clip a canvas to look like a circle.
i did a circle that has radius half of the canvas, and is positioned in the center.
Effect is same as your example.
Look the fiddle:
var canvas = new fabric.Canvas('c');
canvas.clipTo = function(ctx) {
ctx.beginPath();
ctx.arc(200,200,200,0,2*Math.PI);
}
canvas.backgroundColor = 'blue';
var rect = new fabric.Rect({width: 100, height:100, fill:'red', top:30, left:30});
canvas.add(rect);
canvas.renderAll();
<script src="http://www.fabricjs.com/lib/fabric.js"></script>
<canvas id="c" width="400" height="400" ></canvas>
Is it possible to make this with CSS and maybe JavaScript if necessary?
I want content inside that triangle div (image1/2.jpg) to be 2 different divs since I want to make them into links to 2 different pages.
Using html canvas and kinetic js you should be able to achieve this:
JavaScript
var c = $('#canvas').get(0).getContext("2d"),
imageOne = $('#imageOne').get(0),
imageTwo = $('#imageTwo').get(0),
pattern1 = c.createPattern(imageOne,"no-repeat"),
pattern2 = c.createPattern(imageTwo,"no-repeat");
c.canvas.width = 400; // width of rectangle
c.canvas.height = 400; // height of rectangle
c.fillStyle = pattern1;
c.beginPath();
c.moveTo(0, 0); // top left
c.lineTo(400, 0); // top right
c.lineTo(400, 400); // bottom right
c.closePath();
c.fill();
c.fillStyle = pattern2;
c.beginPath();
c.moveTo(0, 0); // top left
c.lineTo(0, 400); //bottom left
c.lineTo(400, 400); // bottom right
c.closePath();
c.fill();
HTML
<canvas id="canvas">
<img id="imageOne" src="http://lorempixel.com/400/400/city/1" />
<img id="imageTwo" src="http://lorempixel.com/400/400/city/2" />
</canvas>
Fiddle Example
Images going to different corner
You can accomplish this with absolute positioning:
http://jsfiddle.net/4wutsrs3/
<div class="con">
<div class="lft"></div>
<div class="rgt"></div>
<div class="lft-lbl">lft-lbl</div>
<div class="rgt-lbl">rgt-lbl</div>
</div>
.con { width:200px; position:relative; }
.lft { width:0; height:0; position:absolute; top:0; left:0;
border-style:solid;
border-width:200px 0 0 200px;
border-color:transparent transparent transparent orange;
}
.rgt { width:0; height:0; position:absolute; top:0; right:0;
border-style:solid;
border-width:0 200px 200px 0;
border-color:transparent #007bff transparent transparent;
}
.lft-lbl { position:absolute; top:160px; left:20px; }
.rgt-lbl { position:absolute; top:20px; right:20px; z-index:99; }
Roughly I wanted this. There are still couple of things that I'm not happy about, but I know how to handle them. Thank you Radio for pointing me to clipping.
http://jsfiddle.net/ojcx4k03/