I am using FabricJS and the shapes are not displaying, my code is on JSFiddle:
https://jsfiddle.net/270t9hfs/1/
var canvas = new fabric.Canvas("canvas");
function addRectangle(){
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: "red",
width: 20,
height: 20,
angle: 0
});
canvas.add(rect);
}
The following example has a working addRectangle function:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
#canvas {
border: 1px solid;
}
button { margin-top: 9px }
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<button onclick="addRectangle()">Add Rectangle</button>
<button onclick="addTriangle()">Add Triangle</button>
<button onclick="addCircle()">Add Circle</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script type="text/javascript">
var canvas = new fabric.Canvas("canvas");
function addRectangle(){
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: "red",
width: 20,
height: 20,
angle: 0
});
canvas.add(rect);
}
</script>
</body>
</html>
Two issues were breaking your code:
Missing Fabric JS library
Initialising your Fabric JS canvas before the DOM had loaded. Moving the JavaScript to the bottom of the page resolves this. Alternatively you could use JavaScript to listen for when the DOM has loaded.
Related
This is my first HTML code. i m trying to put a canvas where user can put e signature by his mouse. Can anyone help me where im wrong. The html and css part works but e signature is not showing on the screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>eSignature Page</title>
<style>
.wrapper {
position: relative;
width: 400px;
height: 200px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: white;
}
</style>
<script>
var canvas = document.getElementById('signature-pad');
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)'
});
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
</script>
</head>
<body>
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<button id="clear">Clear</button>
</body>
</html>
There is this point :
You seem to use this external library but you don't load it on
your code
You need to load it, the simplest way is to load it from the CDN
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
After as you specify the background-color in your css :
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: white; // <----- Here
}
Hence, you don't need to add the option when you create your signaturePad :
// BEFORE
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)'
});
// AFTER
const signaturePad = new SignaturePad(canvas);
const canvas = document.getElementById('signature-pad');
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
const signaturePad = new SignaturePad(canvas);
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
.wrapper {
position: relative;
width: 400px;
height: 200px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: lightgrey; // For visualisation puropse, I changed it
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>eSignature Page</title>
</head>
<body>
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<button id="clear">Clear</button>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
</body>
</html>
I am trying to show a tooltip by hovering the mouse on a circle inside a canvas. While the CSS is changing from hidden to visible by javaScript (saw that through chrome inspect), the tooltip is not showing up. Please help to sort this out. Thank you for your help.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
</canvas>
</div>
</body>
</html>
you need to move the .tooltip element out of the canvas element, otherwise it won't display.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create circle
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circle);
// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) {
// Check whether point is inside circle
if (ctx.isPointInPath(circle, event.clientX, event.clientY)) {
showtext();
} else {
hidetext();
}
});
function showtext() {
document.getElementById("tooltiptext").style.visibility = 'visible';
}
function hidetext() {
document.getElementById("tooltiptext").style.visibility = 'hidden';
}
.tooltip {
visibility: hidden;
position: absolute;
top: 20px; left: 20px;
}
body {
margin: 0;
}
<canvas id="canvas"></canvas>
<div class="tooltip">
<span id="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
There were two issues:
The manner in which you were applying styles to your canvas were causing its display not to match its internal tracking of the position of the items it contained, so the if condition was not necessarily returning true when the cursor was over where the circle was appearing.
A canvas cannot render and display contents.
As such, the below snippet shows a version of this that works. You'll need to figure out how to position things correctly, but it solves the immediate issue.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
</canvas>
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">
blah
</span>
</div>
</div>
</body>
</html>
The problem was that you set the width and height of the canvas as the 100% of the parent in the css.
You need to set the canvas's width and height attribute instead.
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
<canvas id="canvas" width="200" height="200">
I am using jsplumb to my project. I mentioned my sample below. when I drag and drop divs, divs should appear with anchor points. anchors points can be connecting each other. in my sample I did drag and drop part. but I am unable to complete the rest of the work. please check my sample and get an idea.
I am using jsplumb to my project. I mentioned my sample below. when I drag and drop divs, divs should appear with anchor points. anchors points can be connecting each other. in my sample I did drag and drop part. but I am unable to complete rest of the work. please check my sample and get the idea.
jsPlumb.ready(function() {
jsPlumb.Defaults.Container=$("#dropArea");
jsPlumb.Defaults.PaintStyle = { strokeStyle:"palevioletred", lineWidth:2,
dashstyle: '3 3'};
jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"palevioletred" };
jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
jsPlumb.connect({
connector: ["Straight"],
source:"element",
target:"element",
anchor: ["Left", "Right"],
endpoint:"Dot"
});
jsPlumb.setContainer($('#dropArea'));
var i = 1;
$(".element").draggable ({
helper : 'clone',
cursor : 'pointer',
tolerance : 'fit',
revert : true
});
$("#dropArea").droppable ({
accept: '.element',
containment: 'dropArea',
drop: function (e, ui) {
droppedElement = ui.helper.clone();
ui.helper.remove();
$(droppedElement).removeAttr("class");
jsPlumb.repaint(ui.helper);
var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
newAgent.text('Element ' + i);
$(droppedElement).draggable({containment: "dropArea"});
$('#dropArea').append(newAgent);
jsPlumb.draggable(newAgent, {
containment: 'parent' });
i++;
}
});
$("#dropArea").on('click', '.pro', function (e) {
i++;
var newState = $('<div>').attr('id', 'state' + i).addClass('section').
text('Section '+ (i-1));
var title = $('<div>').addClass('title');
var connect = $('<div>').addClass('connector').
text('Click here to drag');
newState.css({
'top': e.pageY,
'left': e.pageX });
newState.append(title);
newState.append(connector);
$(this).append(newState);
jsPlumb.makeTarget(newState, {
anchor: 'Continuous' });
jsPlumb.makeSource(connector, {
anchor: 'Continuous' });
newState.dblclick(function (e) {
jsPlumb.detachAllConnections($(this));
$(this).remove();
e.stopPropagation();
});
});
});
#import url(http://fonts.googleapis.com/css?family=Montserrat);
* {
font-family: 'Montserrat', sans-serif;
}
#dropArea {
position: relative;
resize: both;
margin-left: 180px;
border: 1px solid #aaaaaa;
width: 800px;
height: 650px;
overflow-x: scroll;
overflow-y: scroll;
}
.title {
padding: 10px;
cursor: move;
}
.connector {
font-size:10px;
text-align: center;
width: 100%;
height: 20px;
background-color: #ffffff;
cursor: pointer;
}
.element {
border: 1px solid gray;
text-align: center;
width: 170px;
height: 75px;
background-color: lightpink;
position: absolute;
}
.pro {
border: 1px solid gray;
text-align: center;
width: 170px;
height: 75px;
background-color: lightpink;
position: absolute;
}
.section {
font-size: 12px;
text-align: center;
font-weight: 200;
border: 1px solid black;
background-color: #ddddff;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.7.13/js/jsplumb.js"></script>
</head>
<body>
<div class="element" id="cId">
</div>
<div id="dropArea">
</div>
</body>
</html>
So I am creating an image display script that is meant to act like an overlay. I basically want to feed the image size into the animate method so that I can maintain proper image proportions. I am taking the href, using preventDefault, and feeding the URL into the img src that I have in the HTML. Should I just be creating a new img dynamically each time and then using the dynamically created image to read the size of the image and then animating inside a load method? Not sure how to proceed. code follows:
<!doctype html>
<html>
<head>
<title></title>
</head>
<style>
body {
background-color: white;
color: black;
margin: 0;
padding: 0;
}
.overlayIt {
color: red;
text-decoration: none;
}
.overlayIt:HOVER {
color: black;
}
#frameIt {
display: none;
position: relative;
z-index: 101;
width: 0px;
height: 0px;
color: black;
overflow: hidden;
opacity: 1;
border: 1px solid white;
background-color: #000;
color: white;
text-align: center;
margin-top: -65px;
margin-left: auto;
margin-right: auto;
}
#pageOverLay {
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 1000px;
width: 100%;
background-color: black;
opacity: 0;
}
</style>
<body>
CLICK<br/>
CLICK
<P/><P/><P/>
THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT<br>
THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT<br>
THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT<br>
THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT THIS IS SOME TEXT<br>
<div id="pageOverLay"> </div>
<img id="frameIt">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var link;
var overlayToggle = false;
function openOverlay() {
$('#frameIt').attr('src',link);
$('#pageOverLay').css('z-index','100').animate({opacity: 0.8}, 500, function() {
$('#frameIt').css('display','block').animate({height: 500}, 300, function() {
$('#frameIt').animate({width: 500}, 500);
});
});
overlayToggle = true;
};
function closeOverlay() {
$('#pageOverLay').animate({opacity: 0.0}, 500, function() {
$('#frameIt').animate({width: 0}, 300, function() {
$('#pageOverLay').css('z-index','-1');$('#frameIt').css('display','none').css('height','0');
});
});
overlayToggle = false;
};
$(function() {
$('.overlayIt').on('click',function(e) {
e.preventDefault();
link = $(this).attr('href');
openOverlay();
});
$('#frameIt').on('click',function() {
closeOverlay();
});
$(document).keyup(function(e) {
if(e.keyCode == 27 && overlayToggle)
closeOverlay();
});
});
</script>
</body>
</html>
I solved my problem like this:
I dynamically added the image and then had to check for its dimensions like so -
var imag = $('<img style="max-width: 90%;">');
$(imag).attr('src',link);
$(imag).load(function() {
wdth = this.width;
hght = this.height;
});
The main problem with me trying this before is that $(this) and $(imag) would not return the proper dimensions in the load function. I had to use the non-jquery this keyword. Odd behavior.
I'm trying to trigger JW Player to display the current item (now playing). Unfortunately I can't get it to work. Getting an error:
[Error] TypeError: undefined is not an object (evaluating 'G.length')
This is my code:
<head>
<style type="text/css">
body {
background-color: #000;
}
.jwrapbuttons {
max-width: 330px;
margin: 0 auto;
}
.jwbutton {
font-weight: bold;
font-size: 26px;
padding: 10px 30px;
border: 2px solid #ff0000;
color: #ff0000;
display: inline-block;
text-decoration: none;
margin: 50px 10px;
background: rgba(255, 0, 0, 0.3);
}
.videobgelement {
position: fixed !important;
z-index: -1;
top: 0;
left: 0;
}
</style>
</head>
<script src="jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="m7vmXLZ0enrVLb+YYgi5ov3fLyu1cuUO06mN3bduBFQsvJceYFThIWkoGOmfvZPm";</script>
<div id="player"></div>
<script type="text/javascript">
jwplayer('player').setup({
width: "100%",
height: "100%",
playlist: "playlist.jw5.rss",
plugins: {
'../jwplayer.shuffle.js': {
autostart: true,
repeatplaylist: true,
shuffle: true
}
}
});
jwplayer('player').addButton("shuffle.png", "Shuffle", function() {
shuffle_setShuffle();
}, "jwplayer-shuffle");
jwplayer('player').addButton("repeat.png", "Repeat", function() {
shuffle_setRepeatPlaylist();
}, "jwplayer-repeat");
var current = jwplayer().getPlaylistItem();
console.log(current);
</script>
</script>
</div>
I know it is a bit messy, but I'm wondering: where did I go wrong? What should I define so it'll work?
Riccardo
Fixed it: firing an alert instead of just randomly. Also: getPlaylistItem is not supported in old versions of JW Player. It's supported in 6.5 and above.