Canvas stroke() seems to be broken in chrome version 44
see test: https://jsfiddle.net/n9ds4q8m/ click on test button
works fine in FF/IE even Edge. Grid does not show in Chrome but used to?
var canvas = document.getElementById("drawing");
// if the canvas element exists
if (canvas != null) {
var ctx = canvas.getContext("2d");
ctx.setLineDash([null]);
ctx.lineWidth = 0.5;
ctx.strokeStyle = "#eeeeee";
// horizontal grid lines
for (var i = 0; i <= canvas.height; i = i + 10) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(canvas.width, i);
if (i % parseInt(50) == 0) {
ctx.lineWidth = 2;
} else {
ctx.lineWidth = 0.5;
}
ctx.closePath();
ctx.stroke();
}
// vertical grid lines
for (var j = 0; j <= canvas.width; j = j + 10) {
ctx.beginPath();
ctx.moveTo(j, 0);
ctx.lineTo(j, canvas.height);
if (j % parseInt(50) == 0) {
ctx.lineWidth = 2;
} else {
ctx.lineWidth = 0.5;
}
ctx.closePath();
ctx.stroke();
}
}
}
HTML: <body>
<form id="form1" runat="server">
<div><input type="button" onclick="draw()" value="test" />
<canvas id="drawing" width="800" height="550" style="position: relative; cursor: crosshair; border: 1px solid #000; z-index: 10; -ms-touch-action: none; touch-action: none;"></canvas>
</div>
</form>
</body>
I'm glad you noticed this. I sort of noticed this a few days ago, but didn't set out to really investigate it until today. I have narrowed down the problem. It doesn't like the
ctx.setLineDash([null]);
part. In my code, I was using
ctx.setLineDash([0,0]); and it doesn't like that either.
After some more investigating, it seems that [0,0] doesn't make any sense, even though Firefox allows it that way. Also, [null] isn't spec compliant. So the best way to make solid lines is
ctx.setLineDash([]);
Related
how would i go about creating a transparent text box inside a canvas?
any elegant solution?
I've read than i can make a transparent input box and position is above the canvas,
but how would said canvas save the words entered in said textbox?
would appreciate any solutions
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
}
var inp = document.getElementById("input");
var para = document.getElementById("p1");
// Check browser support
if (typeof(Storage) !== "undefined") {
inp.value = localStorage.getItem("x");
}
else {
para.innerHTML = "Sorry, your browser does not support Web Storage...";
}
function abc(){
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("x", inp.value);
// Retrieve
inp.value = localStorage.getItem("x");
}
else {
para.innerHTML = "Sorry, your browser does not support Web Storage...";
}
}
#canvas {
position:absolute;
border: 1px solid black;
height: 100px;
}
input {
position:absolute;
left:8px;
top: 16px;
background-color: transparent;
border: 0px;
width: 202px;
height: 100px;
font-size: 200%;
}
<div>
<canvas id="canvas"></canvas>
<input onkeydown="abc()" type="text" id="input">
<p id="p1"></p>
</div>
you can see a error like this
{
"message": "Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.",
"filename": "https://stacksnippets.net/js",
"lineno": 50,
"colno": 21
}
when you directly run the snippet, so you must run code through an IDE (nodepad, nodepad++, vscode, brackets, sublime etc.) to you browser, then it will work
I hope this will work for you.
On the Konvajs chat stream someone recently asked for an example of drag-and-drop from a palette onto an HTML5 canvas fronted by the Konvajs library. There were no ready examples and I was curious about how to achieve it.
I answered the question in a codepen but decided to post here for (my own) future reference. See my answer below.
Here is my solution using jquery UI draggable & droppables. Konvajs requires jquery so the use of jquery UI is only a small step further. The palette is a set of small canvas elements with one shape drawn per draggable item. The palette can be housed on any html element and does not need to be attached to the main stage in any way.
// Set up the canvas to catch the dragged shapes
var s1 = new Konva.Stage({container: 'container1', width: 500, height: 200});
// add a layer to host the 'dropped' shapes.
var layer1 = new Konva.Layer({draggable: false});
s1.add(layer1);
// set up the palette of draggable shapes - 5 sample shapes.
var palletteEle = $('#pallette');
var d, ps, l, c;
for (var i = 0; i<5; i = i + 1){
// make a div to hold the shape
d = $('<div id="shape' + i + '" class="draggable">Shape</div>')
palletteEle.append(d)
// make a mini stage to hold the shape
ps = new Konva.Stage({container: 'shape' + i, width: 50, height: 50});
// make a layer to hold the shape
l = new Konva.Layer();
// add layer to palette
ps.add(l);
// make a shape - red circles for example
c = new Konva.Circle({x: 24, y: 24, radius: 22, fill: 'red', stroke: 'black'})
l.add(c);
ps.draw();
}
// make a crosshair to give some idea of the drop location
var cross = new Konva.Line({points: [10, 0, 10, 20, 10, 10, 0, 10, 20, 10],
stroke: 'gold',
strokeWidth: 1,
lineCap: 'round',
lineJoin: 'round'})
layer1.add(cross);
//s1.draw();
// make the main stage a drop target
$('#container1').addClass('droppable');
// function to move the cross hairs
function moveCross(x, y){
cross.x(x);
y = y - $('#container1').offset().top;
cross.y(y < 0 ? 0 : y);
s1.draw();
}
// draggable setup. Movecross used to move the crosshairs. More work needed but shows the way.
$( ".draggable" ).draggable({
zIndex: 100,
helper: "clone",
opacity: 0.35,
drag: function( event, ui ) {moveCross(ui.offset.left , ui.offset.top + $(this).offset().top)}
});
// set up the droppable
$( ".droppable" ).droppable({
drop: function( event, ui ) {
dropShape(ui.position.left, ui.position.top)
}
});
// Function to create a new shape when we drop something dragged from the palette
function dropShape() {
var c1 = new Konva.Circle({x: cross.x(), y: cross.y(), radius: 22, fill: 'red', stroke: 'black'});
layer1.add(c1);
cross.x(0); cross.y(0);
cross.moveToTop(); // move the cross to the top to stop going bahind previously dropped shapes.
s1.draw();
}
p
{
padding: 4px;
}
#container1
{
display: inline-block;
width: 500px;
height: 200px;
background-color: silver;
overflow: hidden;
}
#pallette
{
height: 52px; width: 500px;
border: 1px solid #666;
margin-bottom: 10px;
z-index: 10;
}
.draggable
{
width:50px;
height: 50px;
display: inline-block;
border: 1px solid #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<p>Drag a red circle from the pallette and drop it on the grey canvas.
</p>
<div id='pallette'></div>
<div id='container1'></div>
I tried Vanquished Wombat's solution, it was a great example. But ultimately I wanted my palette to be separate from Konva. So I modified that original snippet to work with Html5 drag & drop, without any jQuery. See the snippet below. You can drag stars & circles from the palette into the Konva canvas. Currently you have to drop onto another shape, but you can modify it easily to drop anywhere on the canvas. I'm using text for the palette items and a custom image for the drag object just for fun. But you can just use an img instead of using the setDragImage code.
const CUSTOM_DATA_TYPE = 'text/x-node-type';
// Set up the canvas to catch the dragged shapes
var s1 = new Konva.Stage({
container: 'container1',
width: 500,
height: 200
});
// add a layer to host the 'dropped' shapes.
var layer1 = new Konva.Layer({
draggable: false
});
s1.add(layer1);
for (let t = 0; t < 10; t++) {
let rect = document.getElementById('container1').getBoundingClientRect();
let x = Math.floor(Math.random() * rect.width);
let y = Math.floor(Math.random() * rect.height);
let type = Math.floor(Math.random() * 100) % 2 == 0 ? 'circle' : 'star';
dropShape(x, y, type);
}
// Function to create a new shape when we drop something dragged from the palette
function dropShape(x, y, type) {
var shape;
if (type == 'circle') {
shape = new Konva.Circle({
x: x,
y: y,
radius: 22,
fill: 'blue',
stroke: 'black'
});
} else {
shape = new Konva.Star({
x: x,
y: y,
numPoints: 5,
innerRadius: 10,
outerRadius: 20,
fill: 'purple',
stroke: 'black'
});
}
layer1.add(shape);
s1.draw();
}
function cursorToCanvasPos(e) {
let clientRect = document.getElementById('container1').getBoundingClientRect();
let pointerPosition = {
x: e.clientX - clientRect.x,
y: e.clientY - clientRect.y,
};
return pointerPosition;
}
function getHoveredShape(e) {
let pointerPosition = cursorToCanvasPos(e);
return s1.getIntersection(pointerPosition);
}
function onDragStart(e, type) {
// Do this or other things can mess with your drag
e.stopPropagation();
e.dataTransfer.setData(CUSTOM_DATA_TYPE, type);
e.dataTransfer.effectAllowed = "all";
var dragIcon = document.createElement('img');
dragIcon.src = 'https://placehold.it/100x100';
dragIcon.width = 100;
e.dataTransfer.setDragImage(dragIcon, 150, 150);
}
function onDragOver(e) {
// Might break if you don't have this
e.stopPropagation();
// Breaks for sure if you don't have this
e.preventDefault();
let thing = getHoveredShape(e);
if (thing) {
e.dataTransfer.dropEffect = "move";
// Just fire off a custom even if you want to, this does nothing in this example.
thing.fire('htmlDragOver');
} else {
e.dataTransfer.dropEffect = "none";
}
}
function onDrop(e) {
e.stopPropagation();
let type = e.dataTransfer.getData(CUSTOM_DATA_TYPE);
let pos = cursorToCanvasPos(e);
dropShape(pos.x, pos.y, type);
}
p {
padding: 4px;
}
#container1 {
display: inline-block;
width: 500px;
height: 200px;
background-color: silver;
overflow: hidden;
}
#palette {
height: 52px;
width: 500px;
border: 1px solid #666;
margin-bottom: 10px;
z-index: 10;
}
#palette span {
width: 50px;
height: 25px;
display: inline-block;
border: 1px solid #666;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<p>Drag circle/star from the palette onto an existing shape on the canvas below.
</p>
<div id='palette'>
<!-- Pre-load this image so it'll be used for our drag -->
<img src="https://placehold.it/100x100" style="display: none">
<span draggable="true" ondragstart="onDragStart(event, 'circle')">circle</span>
<span draggable="true" ondragstart="onDragStart(event, 'star')">star</span>
</div>
<div id='container1' ondragover="onDragOver(event)" ondrop="onDrop(event)"></div>
i have simple html which draws yellow rectangle on top of it i draw image to draw png image with transparency , the problem is that when i do that , the there is some image rectangle on top right which i don't know from where it come .
And here is the code :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style>
body {
background-color: lightblue;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
#gameAreaWrapper {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
</style>
<script>
var cv;
var context;
var playerImage = "images/char2_sprite.png";
var playerSprite;
var debug = function(args) {
if (console && console.log) {
console.log(args);
}
};
function setUpCanvas()
{
document.getElementById('gameAreaWrapper').style.opacity = 1;
this.cv = document.getElementById('cvs');
this.cv.width = 600;
this.cv.height = 600;
this.context = this.cv.getContext('2d');
this.context.beginPath();
this.context.rect(0,0, 600, 600);
this.context.fillStyle = 'yellow';
this.context.fill();
this.context.lineWidth = 7;
this.context.strokeStyle = 'black';
this.context.stroke();
}
function sprite (options) {
var that = {},
frameIndex = 0,
tickCount = 0,
ticksPerFrame = options.ticksPerFrame || 0,
numberOfFrames = options.numberOfFrames || 1;
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;
that.update = function () {
tickCount += 1;
if (tickCount > ticksPerFrame) {
tickCount = 0;
// If the current frame index is in range
if (frameIndex < numberOfFrames - 1) {
// Go to the next frame
frameIndex += 1;
} else {
frameIndex = 0;
}
}
};
that.render = function () {
// Clear the canvas
that.context.clearRect(0, 0, that.width / numberOfFrames, that.height);
// Draw the animation
that.context.drawImage(
that.image,
frameIndex * that.width / numberOfFrames,
0,
that.width / numberOfFrames,
that.height,
300,
300,
that.width / numberOfFrames,
that.height);
};
return that;
}
function imageloaded()
{
debug("imageloaded:"+playerImage.src);
playerSprite.update();
playerSprite.render();
}
function loadCharacter()
{
// Create sprite sheet
playerImage = new Image();
playerImage.addEventListener("load", imageloaded);
playerImage.src ="images/char2_sprite.png";
// Create sprite
playerSprite = sprite({
context: this.context,
width: 80,
height: 40,
image: playerImage,
numberOfFrames: 2,
ticksPerFrame: 4
});
}
window.onload = function() {
setUpCanvas();
loadCharacter();
}
</script>
</head>
<body>
<div id="gameAreaWrapper">
<canvas tabindex="1" id="cvs" ></canvas>
</div>
</body>
</html>
I turned your code (which you should consider turning into an MCVE) into a stack snippet:
var cv;
var context;
var playerImage = "http://gravatar.com/avatar";
var playerSprite;
var debug = function(args) {
if (console && console.log) {
console.log(args);
}
};
function setUpCanvas() {
document.getElementById('gameAreaWrapper').style.opacity = 1;
this.cv = document.getElementById('cvs');
this.cv.width = 600;
this.cv.height = 600;
this.context = this.cv.getContext('2d');
this.context.beginPath();
this.context.rect(0, 0, 600, 600);
this.context.fillStyle = 'yellow';
this.context.fill();
this.context.lineWidth = 7;
this.context.strokeStyle = 'black';
this.context.stroke();
}
function sprite(options) {
var that = {},
frameIndex = 0,
tickCount = 0,
ticksPerFrame = options.ticksPerFrame || 0,
numberOfFrames = options.numberOfFrames || 1;
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;
that.update = function() {
tickCount += 1;
if (tickCount > ticksPerFrame) {
tickCount = 0;
// If the current frame index is in range
if (frameIndex < numberOfFrames - 1) {
// Go to the next frame
frameIndex += 1;
} else {
frameIndex = 0;
}
}
};
that.render = function() {
// Clear the canvas
that.context.clearRect(0, 0, that.width / numberOfFrames, that.height); // <-- You are clearing that rect here!
// Draw the animation
that.context.drawImage(
that.image,
frameIndex * that.width / numberOfFrames,
0,
that.width / numberOfFrames,
that.height,
300,
300,
that.width / numberOfFrames,
that.height);
};
return that;
}
function imageloaded() {
debug("imageloaded:" + playerImage.src);
playerSprite.update();
playerSprite.render();
}
function loadCharacter() {
// Create sprite sheet
playerImage = new Image();
playerImage.addEventListener("load", imageloaded);
playerImage.src = "http://gravatar.com/avatar";
// Create sprite
playerSprite = sprite({
context: this.context,
width: 80,
height: 40,
image: playerImage,
numberOfFrames: 2,
ticksPerFrame: 4
});
}
window.onload = function() {
setUpCanvas();
loadCharacter();
}
body {
background-color: lightblue;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
-webkit-user-select: none;
/* webkit (safari, chrome) browsers */
-moz-user-select: none;
/* mozilla browsers */
-khtml-user-select: none;
/* webkit (konqueror) browsers */
-ms-user-select: none;
/* IE10+ */
}
#gameAreaWrapper {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
<div id="gameAreaWrapper">
<canvas tabindex="1" id="cvs"></canvas>
</div>
The that.render() method clears that rectangle via
that.context.clearRect(0, 0, that.width / numberOfFrames, that.height);
You are calling clearRect(0, 0, ...); on your canvas' context which fills that area with transparent pixels.
I've seen some cool image masking and other effects with CSS3. Using only CSS3 can we achieve this effect seen in the code below or see working fiddle.
http://jsfiddle.net/s6u9a/
HTML
<canvas id="canvas1" width="400" height="400"></canvas>
Javascript
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
can.addEventListener('mousemove', function(e) {
var mouse = getMouse(e, can);
redraw(mouse);
}, false);
function redraw(mouse) {
console.log('a');
can.width = can.width;
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.rect(0,0,500,500);
ctx.arc(mouse.x, mouse.y, 70, 0, Math.PI*2, true)
ctx.clip();
ctx.drawImage(img2, 0, 0);
}
var img = new Image();
img.onload = function() {
redraw({x: -450, y: -500})
}
img.src = 'http://placekitten.com/400/400';
var img2 = new Image();
img2.onload = function() {
redraw({x: -450, y: -500})
}
img2.src = 'http://placekitten.com/400/395';
function getMouse(e, canvas) {
var element = canvas,
offsetX = 0,
offsetY = 0,
mx, my;
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
return {
x: mx,
y: my
};
}
Here's an alternate approach using background-image. It's more flexible, and you get a circular (or arbitrarily shaped) viewport:
http://jsfiddle.net/maackle/66uCs/
HTML
<div class="masker">
<img class="base" src="http://lorempixel.com/400/400/cats/1" />
<div class="overlay"></div>
</div>
CSS
.masker {
position: relative;
}
.overlay {
position: absolute;
display: none;
width: 100px;
height: 100px;
border-radius: 50%;
background: url(http://lorempixel.com/400/400/cats/2) no-repeat;
}
jQuery 1.10.1
$('.masker').on('mousemove', function (e) {
var r, x, y, top, left, bottom, right, attr, $base, $overlay;
r = 100;
$base = $(this).find('.base');
$overlay = $(this).find('.overlay');
x = e.pageX - $base.offset().left;
y = e.pageY - $base.offset().top;
top = y - r / 2;
left = x - r / 2;
if (x < 0 || y < 0 || x > $base.width() || y > $base.height()) {
$overlay.hide();
} else {
$overlay.show().css({
'background-position': '' + (-left) + 'px ' + (-top) + 'px',
'left': left,
'top': top
});
}
});
//just for good measure
$('.masker').on('mouseout', function (e) {
$(this).find('.overlay').hide();
});
Here's a solution that uses mostly CSS -- you do need some Javascript to detect the mouse position. Note that this gives you a square viewport instead of a circle, but if CSS ever adds circle() alongside rect() for the clip property, you will have that option:
http://jsfiddle.net/maackle/Yc2b4/
HTML
<div class="masker">
<img class="base" src="http://lorempixel.com/400/400/cats/1" />
<img class="overlay" src="http://lorempixel.com/400/400/cats/2" />
</div>
CSS
.masker {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
display: none;
}
jQuery 1.10.1
$('.masker img').on('mousemove', function(e) {
var r, x, y, top, left, bottom, right, attr, $overlay;
r = 100;
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
top = y - r/2;
left = x - r/2;
bottom = y + r/2;
right = x + r/2;
attr = 'rect('+(top)+'px, '+(right)+'px, '+(bottom)+'px, '+(left)+'px)';
$overlay = $('.masker .overlay');
$overlay.show().css({clip: attr});
});
$('.masker img').on('mouseout', function(e) {
$('.masker .overlay').hide();
});
Is it possible to have a full screen canvas element in the background of a webpage and "normal" markup elements like a table in front of it?
like the following snippet (if it wouldn't be used as alternative content):
<canvas id="imageView" width="100%" height="100%">
<table>...</table>
</canvas>
You could try setting a CSS style on the canvas where it has a position: fixed (or absolute as appropriate), and then any content that follows it (as opposed to container content as you've given in your example) should sit on top of it.
<html>
<style>
body {
margin:0;
padding:0;
}
canvas{
position:absolute;
left:0;
top:0;
z-index:-1;
}
div{
position:absolute;
z-index:0;
left:12px;
top:10px;
}
</style>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<div>hello is floating div</div>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 600, 600);
grd.addColorStop(0, "#FF0000");
grd.addColorStop(1, "#00FF00");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 600, 600);
</script>
</body>
</html>
I tried it for you with the following code. The div gets placed on top of the canvas element just as Matthew describes it. So should work for you:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas demo</title>
<style type="text/css">
#canvasSection{ position:fixed;}
</style>
<script type="text/javascript">
function draw()
{
//paint the text
var canvas = document.getElementById('canvasSection');
var context = canvas.getContext('2d');
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.font = 'bold 30px sans-serif';
context.strokeText('Your Text!!', 0, 0);
//paint the square
var canvasSquare = document.getElementById('canvasSquare');
var ctxSquare = canvas.getContext('2d');
ctxSquare.fillStyle='#FF0000';
ctxSquare.fillRect(0, 100,50,100);
}
</script>
</head>
<body onLoad="draw()">
<canvas id="canvasSection">Error, canvas is not supported</canvas>
<div>TestText</div>
</body>
</html>
You can use toDataURL() to have it in pure JS separated from HTML
var c = document.createElement('canvas'),
ctx = c.getContext('2d'),
size = c.width = c.height = 50;
for( var x = 0; x < size; x++ ){
for( var y = 0; y < size; y++ ){
ctx.fillStyle = 'hsl(0, 0%, ' + ( 100 - ( Math.random() * 15 ) ) + '%)';
ctx.fillRect(x, y, 1, 1);
}
}
document.body.style.background = 'url(' + c.toDataURL() + ')';
HTML on <b>canvas background</b>
Based on this CodePen