I'm a beginner and trying to learn to code html here by playing around the codes I found online. And I came across a javascript that basically snip image into several boxes. The code goes like this:
$(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw, ch;
// background definition
// OPTION: look at the top-left pixel and assume == background
// then set these vars automatically
var isTransparent = false;
var bkColor = {
r: 255,
g: 255,
b: 255
};
var bkFillColor = "rgb(" + bkColor.r + "," + bkColor.g + "," + bkColor.b + ")";
// load test image
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = start;
img.src = "http://nedroid.com/comics/2010-09-06-guest-comic-jay-fuller.png";
function start() {
// draw the test image on the canvas
cw = canvas.width = img.width / 2;
ch = canvas.height = img.width / 2;
ctx.drawImage(img, 0, 0, cw, ch);
}
function clipBox(data) {
var pos = findEdge(data);
if (!pos.valid) {
return;
}
var bb = findBoundary(pos, data);
clipToImage(bb.x, bb.y, bb.width, bb.height);
if (isTransparent) {
// clear the clipped area
// plus a few pixels to clear any anti-aliasing
ctx.clearRect(bb.x - 2, bb.y - 2, bb.width + 4, bb.height + 4);
} else {
// fill the clipped area with the bkColor
// plus a few pixels to clear any anti-aliasing
ctx.fillStyle = bkFillColor;
ctx.fillRect(bb.x - 2, bb.y - 2, bb.width + 4, bb.height + 4);
}
}
function xyIsInImage(data, x, y) {
// find the starting index of the r,g,b,a of pixel x,y
var start = (y * cw + x) * 4;
if (isTransparent) {
return (data[start + 3] > 25);
} else {
var r = data[start + 0];
var g = data[start + 1];
var b = data[start + 2];
var a = data[start + 3]; // pixel alpha (opacity)
var deltaR = Math.abs(bkColor.r - r);
var deltaG = Math.abs(bkColor.g - g);
var deltaB = Math.abs(bkColor.b - b);
return (!(deltaR < 5 && deltaG < 5 && deltaB < 5 && a > 25));
}
}
function findEdge(data) {
for (var y = 0; y < ch; y++) {
for (var x = 0; x < cw; x++) {
if (xyIsInImage(data, x, y)) {
return ({
x: x,
y: y,
valid: true
});
}
}
}
return ({
x: -100,
y: -100,
valid: false
});
}
function findBoundary(pos, data) {
var x0 = x1 = pos.x;
var y0 = y1 = pos.y;
while (y1 <= ch && xyIsInImage(data, x1, y1)) {
y1++;
}
var x2 = x1;
var y2 = y1 - 1;
while (x2 <= cw && xyIsInImage(data, x2, y2)) {
x2++;
}
return ({
x: x0,
y: y0,
width: x2 - x0,
height: y2 - y0 + 1
});
}
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = "red";
ctx.lineWidth = 0.50;
ctx.stroke();
}
function clipToImage(x, y, w, h) {
// don't save anti-alias slivers
if (w < 3 || h < 3) {
return;
}
// save clipped area to an img element
var tempCanvas = document.createElement("canvas");
var tempCtx = tempCanvas.getContext("2d");
tempCanvas.width = w;
tempCanvas.height = h;
tempCtx.drawImage(canvas, x, y, w, h, 0, 0, w, h);
var image = new Image();
image.width = w;
image.height = h;
image.src = tempCanvas.toDataURL();
$("#clips").append(image);
}
$("#unbox").click(function() {
var imgData = ctx.getImageData(0, 0, cw, ch);
var data = imgData.data;
clipBox(data);
});
}); // end $(function(){});
body {
background-color: ivory;
}
canvas {
border: 1px solid red;
}
#clips {
border: 1px solid blue;
padding: 5px;
}
img {
margin: 3px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script>
<button id="unbox">Clip next sub-image</button><br>
<canvas id="canvas" width=300 height=150></canvas><br>
<h4>Below are images clipped from the canvas above.</h4><br>
<div id="clips"></div>
Nothing happen when I click the button, not even the image is loaded onto the canvas. I searched through various online tutorials and that leads to nothing. I have tried forcefully call out the function using start(); in the <body> section but still it's not working.
Problem is not in the code,
it is in the location of Image, put the image on the same domain or use the image as data uri check CODEPEN for working example.
https://codepen.io/mastersmind/pen/bKNqNP?editors=0011
remove this line
img.crossOrigin = "anonymous";
Related
I want to find center position coordinates of text which created by canvas dynamically. For example, I want to find the x and y coordinates of the center of the number 2 text which written 600px with arial font-family, at 50px intervals. Example:
HTML
<canvas id="myCanvas"></canvas>
JS
const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.font = "600px Arial"; // ** Font family and Font-Size Changeable
ctx.fillText('2',10,450); // ** Number Changeable
jsfiddle
Text, font-family, and font-size changeable dynamically. How can I find center position coordinates
It actually depends on how you define the "center position" of a text. An approach could be to search for certain pixels that define the bounding-box of the text. This bounding-box is always a rectangle that has edges respectively min/max coordinates in each dimension (x, y).
So the center of a text could be defined as the center of this bounding-box. This is what getCenterCoordsFromText does, it returns centered x/y-coordinates based on the coordinate-system of the bounding-box or of the whole canvas.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.font = "100px Arial";
ctx.fillText("2", 14, 92);
function getCenterCoordsFromText(colors, relativeToCanvas) {
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
var minX = Infinity;
var minY = Infinity;
var maxX = 0;
var maxY = 0;
for (var i = 0; i < data.length; i += 4) {
var x = (i / 4) % canvas.width;
var y = Math.floor((i / 4) / canvas.width);
var pixelFound = data[i] === colors.red &&
data[i + 1] === colors.green &&
data[i + 2] === colors.blue &&
data[i + 3] === colors.alpha;
if (pixelFound) {
if (minY > y) {
minY = y;
}
if (maxY < y) {
maxY = y;
}
if (minX > x) {
minX = x;
}
if (maxX < x) {
maxX = x;
}
}
}
var middleX = (maxX - minX) / 2;
var middleY = (maxY - minY) / 2;
return {
x: (relativeToCanvas ? minX : 0) + middleX,
y: (relativeToCanvas ? minY : 0) + middleY,
offsetX: relativeToCanvas ? minX : 0,
offsetY: relativeToCanvas ? minY : 0
}
}
// get locally centered coordinates within bounding-box
var relToCanvasCoordSystem = false;
var letterCoordRelToBox = getCenterCoordsFromText({
red: 0,
green: 0,
blue: 0,
alpha: 255
}, relToCanvasCoordSystem);
document.getElementById("relBoundingBoxCoord").innerHTML = 'x: ' + letterCoordRelToBox.x + ' y: ' + letterCoordRelToBox.y;
// get globally centered coordinates of the bounding-box based on the whole canvas
relToCanvasCoordSystem = true;
var letterCoordRelToCanvas = getCenterCoordsFromText({
red: 0,
green: 0,
blue: 0,
alpha: 255
}, relToCanvasCoordSystem);
document.getElementById("relCanvasCoord").innerHTML = 'x: ' + letterCoordRelToCanvas.x + ' y: ' + letterCoordRelToCanvas.y;
// draw a colored reference for bounding-box-coordinates-system note
function drawBoundingBox(offsetX, offsetY, width, height){
ctx.beginPath();
ctx.strokeStyle = "#FF0000";
ctx.moveTo(offsetX, offsetY);
ctx.lineTo(offsetX + width, offsetY);
ctx.stroke();
ctx.lineTo(offsetX + width, offsetY + height);
ctx.stroke();
ctx.lineTo(offsetX, offsetY + height);
ctx.stroke();
ctx.lineTo(offsetX, offsetY);
ctx.stroke();
}
var offsetX = letterCoordRelToCanvas.offsetX;
var offsetY = letterCoordRelToCanvas.offsetY;
var boxWidth = letterCoordRelToBox.x*2;
var boxHeight = letterCoordRelToBox.y*2;
drawBoundingBox(offsetX, offsetY, boxWidth, boxHeight);
canvas {
border: 1px solid #a3a3a3;
}
.bbcs{
color: red;
}
.ccs{
color: #a3a3a3;
}
<p>relative to <span class="bbcs">bounding-box-coordinate-system</span>:</p>
<div id="relBoundingBoxCoord"></div>
<p>relative to <span class="ccs">canvas-coordinate-system</span>:</p>
<div id="relCanvasCoord"></div>
<br/>
<canvas id="canvas" height="100" width="100"></canvas>
I want to make blur erasing and blur drawing effect in JQuery or Javascript. I have written the code for erasing the blurred image when I hover it and to reveal the unblurred image. Here's the screenshot.
I am able to erase the blur image when I hover over the image, but I couldn't redraw the blurred image at the same position, may be like after 500ms. How do I redraw the blur again over where I hovered with my mouse?
Here's the code for reference:
<!DOCTYPE html>
<html>
<head>
<title>Blur Testing</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
body {
margin: 0;
}
#item {
background: url("http://i66.tinypic.com/2z6uq9f.jpg");
background-size: cover;
background-position: center;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="item"></canvas>
<script>
var canvas = document.getElementById('item');
var ctx = canvas.getContext('2d'),
img = new Image,
radius = 30;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
$('#item').css({
"-webkit-filter": "blur(0px)",
"filter": "blur(0px)"
});
$(img).on('load', function () {
$('#item').mouseover(function (e) {
erase(getXY(e));
}).mousemove(function (e) {
erase(getXY(e));
//setTimeout(redraw(getXY(e)), 400);
});
ctx.drawImage(img, 0, 0);
ctx.globalCompositeOperation = 'destination-out';
});
img.src = 'http://i64.tinypic.com/14mt7yx.jpg';
img.width = window.width;
img.height = window.height;
function getXY(e) {
var r = $('#item')[0].getBoundingClientRect();
return {x: e.clientX - r.left, y: e.clientY - r.top};
}
// function redraw(pos) {
// ctx.globalCompositeOperation = 'source-in';
// ctx.beginPath();
// ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI);
// ctx.closePath();
// ctx.fill();
// };
function erase(pos) {
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
}
</script>
</body>
</html>
The following is a quick modification on Alpha Mask Filter question. I have simply reversed the blur and sharp images. See the linked question for details.
The extra bit to fade out the blur mask
blurMaskFadeCounter += 1;
if((blurMaskFadeCounter % blurMaskFadeRate) === 0){
maskImage.ctx.globalCompositeOperation = "destination-out";
maskImage.ctx.fillStyle = "#000";
maskImage.ctx.globalAlpha = 0.1;
maskImage.ctx.fillRect(0,0,maskImage.width,maskImage.height);
maskImage.ctx.globalAlpha = 1;
maskImage.ctx.globalCompositeOperation = "source-over";
}
Simply draws over the mask with destination-out composition and alpha set low. It is timed to every so many frames to slow it down. If you set alpha below 0.1 you get some pixels that wont completely clear so the frame skipping give a slower response
var imageLoadedCount = 0;
var error = false;
var maskImage;
var flowerImage;
var flowerImageBlur;
/** ImageTools.js begin **/
var imageTools = (function () {
var tools = {
canvas : function (width, height) { // create a blank image (canvas)
var c = document.createElement("canvas");
c.width = width;
c.height = height;
return c;
},
createImage : function (width, height) {
var image = this.canvas(width, height);
image.ctx = image.getContext("2d");
return image;
},
loadImage : function (url, callback) {
var image = new Image();
image.src = url;
image.addEventListener('load', callback);
image.addEventListener('error', callback);
return image;
}
};
return tools;
})();
var mouse;
var demo = function(){
/** fullScreenCanvas.js begin **/
var canvas = (function(){
var canvas = document.getElementById("canv");
if(canvas !== null){
document.body.removeChild(canvas);
}
// creates a blank image with 2d context
canvas = document.createElement("canvas");
canvas.id = "canv";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = "absolute";
canvas.style.top = "0px";
canvas.style.left = "0px";
canvas.style.zIndex = 1000;
canvas.ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
return canvas;
})();
var ctx = canvas.ctx;
/** fullScreenCanvas.js end **/
/** MouseFull.js begin **/
if(typeof mouse !== "undefined"){ // if the mouse exists
if( mouse.removeMouse !== undefined){
mouse.removeMouse(); // remove previouse events
}
}else{
var mouse;
}
var canvasMouseCallBack = undefined; // if needed
mouse = (function(){
var mouse = {
x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false,
interfaceId : 0, buttonLastRaw : 0, buttonRaw : 0,
over : false, // mouse is over the element
bm : [1, 2, 4, 6, 5, 3], // masks for setting and clearing button raw bits;
getInterfaceId : function () { return this.interfaceId++; }, // For UI functions
startMouse:undefined,
mouseEvents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",")
};
function mouseMove(e) {
var t = e.type, m = mouse;
m.x = e.offsetX; m.y = e.offsetY;
if (m.x === undefined) { m.x = e.clientX; m.y = e.clientY; }
m.alt = e.altKey;m.shift = e.shiftKey;m.ctrl = e.ctrlKey;
if (t === "mousedown") { m.buttonRaw |= m.bm[e.which-1];
} else if (t === "mouseup") { m.buttonRaw &= m.bm[e.which + 2];
} else if (t === "mouseout") { m.buttonRaw = 0; m.over = false;
} else if (t === "mouseover") { m.over = true;
} else if (t === "mousewheel") { m.w = e.wheelDelta;
} else if (t === "DOMMouseScroll") { m.w = -e.detail;}
if (canvasMouseCallBack) { canvasMouseCallBack(mouse); }
e.preventDefault();
}
function startMouse(element){
if(element === undefined){
element = document;
}
mouse.element = element;
mouse.mouseEvents.forEach(
function(n){
element.addEventListener(n, mouseMove);
}
);
element.addEventListener("contextmenu", function (e) {e.preventDefault();}, false);
}
mouse.removeMouse = function(){
if(mouse.element !== undefined){
mouse.mouseEvents.forEach(
function(n){
mouse.element.removeEventListener(n, mouseMove);
}
);
canvasMouseCallBack = undefined;
}
}
mouse.mouseStart = startMouse;
return mouse;
})();
if(typeof canvas !== "undefined"){
mouse.mouseStart(canvas);
}else{
mouse.mouseStart();
}
/** MouseFull.js end **/
// load the images and create the mask
if(imageLoadedCount === 0){
imageLoadedCount = 0;
error = false;
maskImage;
flowerImage = imageTools.loadImage("http://www.createjs.com/demos/_assets/art/flowers.jpg", function (event) {
if (event.type === "load") {
imageLoadedCount += 1;
} else {
error = true;
}
})
flowerImageBlur = imageTools.loadImage("http://i.stack.imgur.com/3S5m8.jpg", function () {
if (event.type === "load") {
maskImage = imageTools.createImage(this.width, this.height);
imageLoadedCount += 1;
} else {
error = true;
}
})
}
// set up the canvas
var w = canvas.width;
var h = canvas.height;
var cw = w / 2;
var ch = h / 2;
// calculate time to download image using the MS algorithum. As this code is a highly gaurded secret I have obsficated it for your personal safty.
var calculateTimeToGo= (function(){var b="# SecondQMinuteQHourQDayQWeekQMonthQMomentQTick#.,Some time soon,Maybe Tomorrow.".replace(/Q/g,"#.,# ").split(","),r=Math.random,f=Math.floor,lc=0,pc=0,lt=0,lp=0;var cttg=function(a){if(lc===0){lc=100+r(r()*60);lt=f(r()*40);if(pc===0||r()<(lp/b.length)-0.2){lp=f(r()*b.length);pc=1+f(r()*10)}else{pc-=1}}else{lc-=1}a=lt;if(lp===0){a=lt;if(r()<0.01){lt-=1}}var s=b[lp].replace("#",a);if(a===1){s=s.replace("#","")}else{s=s.replace("#","s")}return s};return cttg})();
// draws circle with gradient
function drawCircle(ctx, x, y, r) {
var gr = ctx.createRadialGradient(x, y, 0, x, y, r)
gr.addColorStop(1, "rgba(0,0,0,0)")
gr.addColorStop(0.5, "rgba(0,0,0,0.08)")
gr.addColorStop(0, "rgba(0,0,0,0.1)")
ctx.fillStyle = gr;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
}
// draw text
function drawText(ctx, text, size, x, y, c) {
ctx.fillStyle = c;
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.lineJoin = "round";
ctx.font = size + "px Arial Black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
if (c !== "black") {
ctx.strokeText(text, x, y + 1);
}
ctx.fillText(text, x, y);
}
// draw the image to fit the current canvas size
function drawImageCentered(ctx, image, x, y) {
var scale = Math.min(w / image.width, h / image.height);
ctx.setTransform(scale, 0, 0, scale, cw, ch);
ctx.drawImage(image, -image.width / 2, -image.height / 2);
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
// how often to fade blur mask
var blurMaskFadeRate =8; // number of frames between fading mask out
var blurMaskFadeCounter = 0;
// points for filling gaps between mouse moves.
var lastMX,lastMY;
// update function will try 60fps but setting will slow this down.
function update(time){
ctx.setTransform(1, 0, 0, 1, 0, 0); // restore transform
ctx.clearRect(0, 0, w, h); // clear rhe canvas
// have the images loaded???
if (imageLoadedCount === 2) {
// draw the unblured image that will appear at the top
ctx.globalCompositeOperation = "source-over";
drawImageCentered(ctx, flowerImageBlur, cw, ch);
drawText(ctx, "Move mouse over image to unblur.", 20 + Math.sin(time / 100), cw, ch - 30, "White");
// Mask out the parts when the mask image has pixels
ctx.globalCompositeOperation = "destination-out";
drawImageCentered(ctx, maskImage, cw, ch);
// draw the blured image only where the destination has been masked
ctx.globalCompositeOperation = "destination-atop";
drawImageCentered(ctx, flowerImage, cw, ch);
blurMaskFadeCounter += 1;
if((blurMaskFadeCounter % blurMaskFadeRate) === 0){
maskImage.ctx.globalCompositeOperation = "destination-out";
maskImage.ctx.fillStyle = "#000";
maskImage.ctx.globalAlpha = 0.1;
maskImage.ctx.fillRect(0,0,maskImage.width,maskImage.height);
maskImage.ctx.globalAlpha = 1;
maskImage.ctx.globalCompositeOperation = "source-over";
}
// because image has been scaled need to get mouse coords on image
var scale = Math.min(w / flowerImage.width, h / flowerImage.height);
var x = (mouse.x - (cw - (maskImage.width / 2) * scale)) / scale;
var y = (mouse.y - (ch - (maskImage.height / 2) * scale)) / scale;
// draw circle on mask
drawCircle(maskImage.ctx, x, y, 60);
// if mouse is draging then draw some points between to fill the gaps
if (lastMX !== undefined) {
drawCircle(maskImage.ctx, ((x + lastMX) / 2 + x) / 2, ((y + lastMY) / 2 + y) / 2, 60);
drawCircle(maskImage.ctx, (x + lastMX) / 2, (y + lastMY) / 2, 60);
drawCircle(maskImage.ctx, ((x + lastMX) / 2 + lastMX) / 2, ((y + lastMY) / 2 + lastMY) / 2, 60);
}
// save las mouse pos on image
lastMX = x;
lastMY = y;
} else {
// Laoding images so please wait.
drawText(ctx, "Please wait.", 40 + Math.sin(time / 100), cw, ch - 30, "White");
drawText(ctx, "loading images... ", 12, cw, ch, "black")
drawText(ctx, "ETA " + calculateTimeToGo(time), 14, cw, ch + 20, "black")
}
// if not restart the request animation frame
if(!STOP){
requestAnimationFrame(update);
}else{
var can = document.getElementById("canv");
if(can !== null){
document.body.removeChild(can);
}
STOP = false;
}
}
update();
}
var STOP = false; // flag to tell demo app to stop
function resizeEvent() {
var waitForStopped = function () {
if (!STOP) { // wait for stop to return to false
demo();
return;
}
setTimeout(waitForStopped, 200);
}
STOP = true;
setTimeout(waitForStopped, 100);
}
window.addEventListener("resize", resizeEvent);
demo();
I have a canvas element that is currently animating lines. However I want to make an array of stored functions that change the numbers and colors of those lines animating in the canvas.
Thus, when I click a specific element, it will select one of the functions in an array which change the colors, speed, line-width, amplitude, etc. to one of those functions.
So let's say I have an array of functions, settings = [A, B, C, D];
where A to D are functions that change the canvas.
Ultimately, I want it so that when I click an element I randomly change the canvas element's settings to those in A, B, C, or D.
I have the following code but am having trouble refactoring the click function to include an array of settings to separate functions. Any help?
Below is the following code I have so far:
var c = document.querySelector('.c') /* canvas element */,
w /* canvas width */, h /* canvas height */,
ctx = c.getContext('2d') /* canvas context */,
/* previous & current coordinates */
x0, y0, x, y,
t = 0, t_step = 1/600,
u = 4, m,
tmp,
/* just me being lazy */
ceil = Math.ceil,
exp = Math.exp, pow = Math.pow, sqrt = Math.sqrt,
PI = Math.PI, sin = Math.sin, cos = Math.cos;
/* FUNCTIONS */
/* a random number between min & max */
var rand = function(max, min) {
var b = (max === 0 || max) ? max : 1, a = min || 0;
return a + (b - a)*Math.random();
};
var trimUnit = function(input_str, unit) {
return parseInt(input_str.split(unit)[0], 10);
};
var initCanvas = function() {
var s = getComputedStyle(c);
w = c.width = trimUnit(s.width, 'px');
h = c.height = trimUnit(s.height, 'px');
m = ceil(w/(10*u)) + 90;
};
var wave = function () {
ctx.clearRect(0, 0, w, h);
ctx.lineWidth = 1.75;
for(var i = 0; i < m; i++) {
x0 = -80;
y0 = i*4*u;
ctx.beginPath();
ctx.moveTo(x0, y0);
for(x = 0; x < w; x++) {
y = u*sin(x/4/(10*i/m + 1) - w*(i/m + 2)*t/20) + i*2*u;
ctx.lineTo(x, y);
x0 = x;
y0 = y;
}
ctx.strokeStyle = 'hsl(' + i*360/m + ', 100%, 70%)';
ctx.stroke();
}
t += t_step;
requestAnimationFrame(wave);
};
addEventListener('resize', initCanvas, false);
initCanvas();
wave();
/*Moods*/
var red = function () {
ctx.clearRect(0, 0, w, h);
ctx.lineWidth = 10;
for(var i = 0; i < m; i++) {
x0 = -100;
y0 = i*8*u;
ctx.beginPath();
ctx.moveTo(x0, y0);
for(x = 0; x < w; x++) {
y = u*sin(x/4/(16*i/m + 1) - w*(i/m + 1)*t/12) + i*2.5*u;
ctx.lineTo(x, y);
x0 = x;
y0 = y;
}
var gradient=ctx.createLinearGradient(0,1000,0,0);
gradient.addColorStop("0.1","orange");
gradient.addColorStop("0.5","red");
gradient.addColorStop("1.0","pink");
ctx.strokeStyle = gradient;
ctx.stroke();
}
t += t_step;
requestAnimationFrame(red);
};
var blue = function () {
ctx.clearRect(0, 0, w, h);
ctx.lineWidth = 1.5;
for(var i = 0; i < m; i++) {
x0 = -100;
y0 = i*8*u;
ctx.beginPath();
ctx.moveTo(x0, y0);
for(x = 0; x < w; x++) {
y = u*sin(x/4/(16*i/m + 1) - w*(i/m + 1)*t/12) + i*2.5*u;
ctx.lineTo(x, y);
x0 = x;
y0 = y;
}
var gradient=ctx.createLinearGradient(0,1000,0,0);
gradient.addColorStop("0.1","lightblue");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","white");
ctx.strokeStyle = gradient;
ctx.stroke();
}
t += t_step;
requestAnimationFrame(blue);
};
/*Mood Functions Above This Point*/
function hundred(min, max) {
return Math.random() * (max - min) + min;
}
$('#click').on('click',function(){
$(".c").fadeOut('700');
setTimeout(function(){
$(".c").fadeIn('900');
},100);
setTimeout(function(){
m = ceil(w/(10*u)) + hundred(0,100);Math.random()*60*9;
/*m = ceil(w/(10*u)) + 100;*/
u = hundred(2,6)
},100);
blue();
});
Most of your red() & blue() code is identical so create 1 animation loop with the common code (animate()).
Gradients are expensive so create each gradient once at the beginning of the app and store them in an object (gradients{}).
Declare a gradientMix variable to tell animate() which gradient to use.
Here is refactored code:
// gradients are expensive so create them once at the start of the app
var gradients={};
gradients['red']=addGradient('orange','red','pink');
gradients['blue']=addGradient('lightblue','blue','white');
var gradientMix='blue';
// animate function with common code
function animate(time){
ctx.clearRect(0, 0, w, h);
ctx.lineWidth = 1.5;
for(var i = 0; i < m; i++) {
x0 = -100;
y0 = i*8*u;
ctx.beginPath();
ctx.moveTo(x0, y0);
for(x = 0; x < w; x++) {
y = u*sin(x/4/(16*i/m + 1) - w*(i/m + 1)*t/12) + i*2.5*u;
ctx.lineTo(x, y);
x0 = x;
y0 = y;
}
// set the strokeStyle to the selected gradient mix
ctx.strokeStyle = gradients[gradientMix];
ctx.stroke();
}
t += t_step;
requestAnimationFrame(animate);
};
function addGradient(color,g1,g2,g3){
var gradient=ctx.createLinearGradient(0,1000,0,0);
gradient.addColorStop("0.1",g1);
gradient.addColorStop("0.5",g2);
gradient.addColorStop("1.0",g3);
}
I want to wrap images and text on sample papercup.
When a image is uploaded on canvas, I want to wrap it around the background image of papercup whose position is fixed at all times.
I am using Fabric JS for the html5 canvas tool.
Here is my code but there it only shows 1pixel of image, also when I click the image to drag and drop ,it VANISHES.
HTML:
<div id="container">
<input type="file" id="imageLoader" name="imageLoader" />
Remove:<input type="button" value="remove" id="imageRemove" name="imageRemove" onClick="handleRemove()"/>
<canvas id="canvas" width="500" height="400" style="width:1000px;height:500px;margin-left:5%;" ></canvas>
</div>
JS:
var offsetY=[0,1,2,3,4,5,6,5,4,3,2,1,0];
var canvas = new fabric.Canvas('canvas', {
backgroundColor: 'rgb(240,240,240)'
});
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.onload = function () {
var width = image.width,
height = image.height;
var context = $("canvas")[0].getContext("2d");
for(var x=0;x<offsetY.length;x++){
context.drawImage(image,
x,0,1,image.height,
x,offsetY[x],1,image.height);
}
};
image.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
function handleRemove() {
canvas.clear().renderAll();
}
I am new at html5 canvas,please help.
http://jsfiddle.net/kNEaX/217/
You can draw a user image like this:
On to this paper cup:
With results like this:
Using this example code:
Modify this example to fit your needs. Good luck with your project!
var faceCanvas = document.getElementById('face');
var faceCtx = faceCanvas.getContext('2d');
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw, ch;
$myslider = $('#myslider');
$myslider.val(50);
var PI = Math.PI;
var cupTop = 78;
var cupBottom = 295;
var dxx = 19;
var dyy = 34;
var l = {
x0: 41,
y0: cupTop,
x1: 74,
y1: cupBottom
};
var r = {
x0: 249,
y0: cupTop,
x1: 218,
y1: cupBottom
};
var t = {
x0: l.x0,
y0: l.y0,
x1: l.x0 + dxx,
y1: r.y0 + dyy,
x2: r.x0 - dxx,
y2: r.y0 + dyy,
x3: r.x0,
y3: r.y0
};
var b = {
x0: l.x1,
y0: l.y1,
x1: l.x1 + dxx,
y1: r.y1 + dyy,
x2: r.x1 - dxx,
y2: r.y1 + dyy,
x3: r.x1,
y3: r.y1
};
var topOffset = 40;
var imgCount = 2;
var cup = new Image();
cup.crossOrigin = 'anonymous';
cup.onload = start;
var pic = new Image();
pic.crossOrigin = 'anonymous';
pic.onload = start;
cup.src = 'https://image.ibb.co/iKJvyc/VENFv.png';
pic.src = 'https://image.ibb.co/dJHG4H/Pu7aY.jpg';
function start() {
if (--imgCount > 0) {
return;
}
cw = canvas.width = faceCanvas.width = cup.width;
ch = canvas.height = faceCanvas.height = cup.height;
draw();
face();
$myslider.change(function() {
var value = parseInt($(this).val()) / 100;
topOffset = (l.y1 - l.y0 - pic.height) * value;
draw();
face();
});
}
function face() {
//
var lm = (l.y1 - l.y0) / (l.x1 - l.x0);
var lb = l.y1 - (lm * l.x1);
//
var rm = (r.y1 - r.y0) / (r.x1 - r.x0);
var rb = r.y1 - (rm * r.x1);
faceCtx.clearRect(0, 0, faceCanvas.width, faceCanvas.height);
for (var y = 0; y < pic.height; y++) {
var yy = cupTop + topOffset + y;
var leftX = (yy - lb) / lm;
var rightX = (yy - rb) / rm;
var width = rightX - leftX;
faceCtx.drawImage(
pic,
0, y, pic.width, 1,
leftX, yy, width, 1
);
}
var yy = cupTop + topOffset;
var p0 = {
x: (yy - lb) / lm,
y: cupTop + topOffset
};
var p3 = {
x: (yy - rb) / rm,
y: cupTop + topOffset
};
var p1 = {
x: p0.x + dxx,
y: p0.y + dyy
};
var p2 = {
x: p3.x - dxx,
y: p3.y + dyy
};
var points = calcPointsOnBezier(p0, p1, p2, p3);
for (var x in points) {
var y = points[x];
ctx.drawImage(faceCanvas, x, 0, 1, ch, x, y - yy, 1, ch);
}
}
function calcPointsOnBezier(p0, p1, p2, p3) {
var points = {};
for (var x = parseInt(p0.x); x < parseInt(p3.x + 1); x++) {
points[x] = p0.y;
}
for (var i = 0; i < 1000; i++) {
var t = i / 1000;
var pt = getCubicBezierXYatT(p0, p1, p2, p3, t);
points[parseInt(pt.x)] = parseInt(pt.y);
}
return (points);
}
function draw() {
ctx.strokeStyle = 'gold';
ctx.clearRect(0, 0, cw, ch);
ctx.drawImage(cup, 0, 0);
// diagnostic();
}
function diagnostic() {
ctx.beginPath();
ctx.moveTo(l.x0, l.y0);
ctx.lineTo(l.x1, l.y1);
ctx.moveTo(r.x0, r.y0);
ctx.lineTo(r.x1, r.y1);
ctx.lineWidth = 3;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(t.x0, t.y0);
ctx.bezierCurveTo(t.x1, t.y1, t.x2, t.y2, t.x3, t.y3);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(b.x0, b.y0);
ctx.bezierCurveTo(b.x1, b.y1, b.x2, b.y2, b.x3, b.y3);
ctx.stroke();
}
function getCubicBezierXYatT(startPt, controlPt1, controlPt2, endPt, T) {
var x = CubicN(T, startPt.x, controlPt1.x, controlPt2.x, endPt.x);
var y = CubicN(T, startPt.y, controlPt1.y, controlPt2.y, endPt.y);
return ({
x: x,
y: y
});
}
// cubic helper formula at T distance
function CubicN(T, a, b, c, d) {
var t2 = T * T;
var t3 = t2 * T;
return a + (-a * 3 + T * (3 * a - a * T)) * T +
(3 * b + T * (-6 * b + b * 3 * T)) * T +
(c * 3 - c * 3 * T) * t2 +
d * t3;
}
body {
background-color: ivory;
}
canvas {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Vertical Position:<input id=myslider type=range min=0 max=100 value=50><br>
<canvas id="canvas" width=300 height=300></canvas>
<canvas id="face" width=300 height=300 hidden></canvas>
ADDITIONAL NOTE: The example above creates the effect on an Html Canvas element
That's done because the effect requires the context.drawImage method which is available in the native Canvas element.
Once you create your effect using native canvas, you can easily use that native canvas as an image source to create a FabricJS Image object (fabric.Image accepts an html canvas as an image source):
// get a reference to the html canvas with the
// "image around mug" effect
var canvas=document.getElementById("canvas");
// create a fabric.Image using that html canvas
// as an image source
var c=new fabric.Canvas('c');
var myFabricImage=new fabric.Image(canvas, {
left: 50,
top: 50,
});
c.add(myFabricImage);
I have completed code that has a user click a button (to the right of the canvas), then the image is added to the canvas and is constrained to only move around the circumference of a circle. In order to move the image the user just needs to click the image and then move the mouse. To release the image the user simply needs to click where the image goes on the canvas.
Here is a fiddle showing what the current code does.
http://jsfiddle.net/smacnabb/68awv7sq/9/
Question: I am looking to be able to have the images that move around the circumference of the circle rotate while moving around the circumference of the circle.
This is what I mean:
Here is a fiddle for the code I added to try and make this happen
http://jsfiddle.net/smacnabb/68awv7sq/11/
in the handlemousemove method, it calls state.draw() every time the mouse move i'm passing mouseX, mouseY to state.draw.
state.draw() is in addstate method and this was the code I added to make the image rotate
var dx = mouseX - centerX;
var dy = mouseY - centerY;
var radianAngle = Math.atan2(dy, dx);
context.save();
context.translate(centerX, centerY);
context.rotate(radianAngle);
if (this.dragging) {
context.strokeStyle = 'black';
context.strokeRect(this.x, this.y, this.width + 2, this.height + 2)
}
context.drawImage(this.image, this.x, this.y);
context.restore();
What am I doing wrong?
You are close...Take a look at this example:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var radianAngle = 0;
var cx = 225;
var cy = 125;
var radius = 50;
// image loader
var imageURLs = [];
var imagesOK = 0;
var imgs = [];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/cars.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/plane.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/cars1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/plane1.png");
loadAllImages(start);
function loadAllImages(callback) {
for (var i = 0; i < imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function() {
imagesOK++;
if (imagesOK >= imageURLs.length) {
callback();
}
};
img.onerror = function() {
alert("image load failed");
}
img.crossOrigin = "anonymous";
img.src = imageURLs[i];
}
}
var imagesY = 20;
var targets = [];
var selectedTarget = -1;
function start() {
var n = imgs.length / 2;
for (var i = 0; i < n; i++) {
var target = imgs[i + n];
ctx.drawImage(target, 15, imagesY);
targets.push({
x: 15,
y: imagesY,
width: target.width,
height: target.height,
image: imgs[i]
});
imagesY += target.height + 10;
}
}
function handleMouseDown(e) {
e.preventDefault();
x = parseInt(e.clientX - offsetX);
y = parseInt(e.clientY - offsetY);
for (var i = 0; i < targets.length; i++) {
var t = targets[i];
if (x >= t.x && x <= t.x + t.width && y >= t.y && y <= t.y + t.height) {
selectedTarget = i;
draw(x, y);
}
}
}
function handleMouseMove(e) {
if (selectedTarget < 0) {
return;
}
e.preventDefault();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
draw(mouseX, mouseY);
}
function draw(mouseX, mouseY) {
var dx = mouseX - cx;
var dy = mouseY - cy;
var radianAngle = Math.atan2(dy, dx);
// Drawing code goes here
var img = targets[selectedTarget].image;
ctx.clearRect(100, 0, canvas.width, canvas.height);
// draw the circle
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
// draw the image rotated around the circumference
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(radianAngle);
ctx.drawImage(img, radius - img.width / 2, -img.height / 2);
ctx.restore();
}
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
handleMouseMove(e);
});
body{ background-color: ivory; }
canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Select an icon on left by clicking<br>
Then move mouse to have icon rotate around circle</h4>
<canvas id="canvas" width=350 height=350></canvas>