I'm trying to add Images above another image in the canvas element
What I'm trying to reach:
Here is what I get:
images source: https://imgur.com/gallery/jaSdhQ9
and this my code:
var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";
var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(draw,0,0 );
ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}
#canvas{
width: 352px;
height: 448px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
<canvas id="canvas" width="352" height="448"></canvas>
you can set this like ctx.drawImage(draw,100,30,90,50 );
var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";
var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(draw,80,25,135,55 );
ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}
#canvas{
width: 352px;
height: 448px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
<canvas id="canvas"></canvas>
I think what you're looking for it's flex-box
#canvas{
display:flex;
justify-content: center;
align-content: center;
}
Here you can read more about the flex-box
thanks to #tokage-dizayn and https://stackoverflow.com/a/19473880/7511165
I came to this code
var shirt = new Image();
shirt.src = "https://i.imgur.com/3rTZGXP.png";
var draw = new Image();
draw.src = "https://i.imgur.com/2abnbj1.png";
//draw.src = "https://i.imgur.com/TSJRGjo.png";
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
console.log(draw.height,draw.width);
var maxSize = 160;
var ratio = Math.min(maxSize / draw.width, maxSize / draw.height);
var width= draw.width*ratio,
height= draw.height*ratio;
console.log(ratio,width,height);
ctx.drawImage(draw,95,90,width,height);
ctx.drawImage(shirt,0,0,canvas.width,canvas.height);
}
#canvas{
width: 352px;
height: 448px;
left: 0px;
top: 0px;
user-select: none;
cursor: default;
}
<canvas id="canvas" width="352" height="448"></canvas>
Related
l do believe to have an issue regarding an if statement that allows for the detection of where the canvas object, being the image that displays , should be located at within the canvas. There is a reproducible demo provided.
NOTE: I do want to KEEP the css alignment, canvasauto, and not remove it if possible.
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var the_button = document.getElementById("the_button");
var the_background = document.getElementById("the_background");
var imageXpos = 500;
var imageYpos = 300;
var imageWidth = 110;
var imageHeight = 80;
var imagecheck_Xpos = canvas.width - imageXpos;
var imagecheck_Ypos = canvas.height - imageYpos;
window.onload = function() {
ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
ctx.drawImage(the_button, imagecheck_Xpos, imagecheck_Ypos, imageWidth, imageHeight);
}
the_button_function = (event) => {
const {
x,
y
} = event;
/* l believe the issue is here */
if ((x >= imagecheck_Xpos && x < (imagecheck_Xpos + imageWidth)) &&
(y >= imagecheck_Ypos && y < (imagecheck_Ypos + imageHeight))) {
alert("<Button>")
}
}
canvas.addEventListener('click', (e) => the_button_function(e));
html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden;
display: block;
}
.canvasauto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<html>
<canvas id="c" width="970" height="550" class="canvasauto"></canvas>
<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />
<img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" />
</html>
You're using x from the MouseEvent. This is an experimental feature which is an alias of clientX.
The clientX property gives the coordinates relative to the application's viewport.
You probably want offsetX, which is relative to (the padding edge of the) target node.
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var the_button = document.getElementById("the_button");
var the_background = document.getElementById("the_background");
var imageXpos = 500;
var imageYpos = 300;
var imageWidth = 110;
var imageHeight = 80;
var imagecheck_Xpos = canvas.width - imageXpos;
var imagecheck_Ypos = canvas.height - imageYpos;
window.onload = function() {
ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
ctx.drawImage(the_button, imagecheck_Xpos, imagecheck_Ypos, imageWidth, imageHeight);
}
the_button_function = (event) => {
const {
offsetX: x,
offsetY: y
} = event;
/* l believe the issue is here */
if ((x >= imagecheck_Xpos && x < (imagecheck_Xpos + imageWidth)) &&
(y >= imagecheck_Ypos && y < (imagecheck_Ypos + imageHeight))) {
alert("<Button>")
}
}
canvas.addEventListener('click', (e) => the_button_function(e));
html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden;
display: block;
}
.canvasauto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<html>
<canvas id="c" width="970" height="550" class="canvasauto"></canvas>
<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />
<img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" />
</html>
I have 2 canvases side by side , and in the first one I have resizable draggable div as a crop region and I want to display the cropped region on the second canvas . But it is not happening in my case. Any help is appreciated
function crop(){
var x = $("#crop_square").width();
var y = $("#crop_square").height();
var ty = $("#crop_square").offset().top -
$("#area_c").offset().top;
var tx = $("#crop_square").offset().left -
$("#area_c").offset().left;
alert(x);
alert(y);
alert(ty);
alert(tx);
var c = document.getElementById("area_c"); //canvaas1
var c2 = document.getElementById("area_c2"); // canvas2
var ctx2 = c2.getContext("2d");
ctx2.drawImage(c,tx,ty,x,y,0,0,x,y );
}
If you need to "crop" a canvas with a div you may use the div's BoundingClientRect data to draw the image on the other canvas:
I hope this is what you were asking.
let cw = (area_c.width = area_c2.width = 400);
let ch = (area_c.height = area_c2.height = 400);
const ctx1 = area_c.getContext("2d");
const ctx2 = area_c2.getContext("2d");
theImg.onload = function() {
ctx1.drawImage(theImg, 0, 0);
let bcr = crop_square.getBoundingClientRect();
ctx2.drawImage(
theImg,
bcr.x,
bcr.y,
bcr.width,
bcr.height,
bcr.x,
bcr.y,
bcr.width,
bcr.height
);
}
.wrap {
width: 300px;
height: 300px;
border: 1px solid;
display: inline-block;
position: relative;
}
#crop_square {
position: absolute;
width: 150px;
height: 75px;
left: 100px;
top: 53px;
border: 5px solid gold;
}
<div class="wrap">
<canvas id="area_c">
<img id="theImg" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAZAAD/4QMBaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM0ODBGMTdBQjMwQTExRTdBMTMzQ0JDMjUzRkE2MDhFIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM0ODBGMTc5QjMwQTExRTdBMTMzQ0JDMjUzRkE2MDhFIiB4bXA6Q3JlYXRvclRvb2w9IjguMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSI3RURCQTlGMDRBOThGQjcwM0QzQzk4MzYwQjAyNDM1QSIgc3RSZWY6ZG9jdW1lbnRJRD0iN0VEQkE5RjA0QTk4RkI3MDNEM0M5ODM2MEIwMjQzNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7QBIUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAA8cAVoAAxslRxwCAAACAAIAOEJJTQQlAAAAAAAQ/OEfici3yXgvNGI0B1h36//uAA5BZG9iZQBkwAAAAAH/2wCEABENDQ0ODRIODhIaEQ8RGh8XEhIXHyIXFxcXFyIjGx4dHR4bIyMpKi0qKSM2Njs7NjZBQUFBQUFBQUFBQUFBQUEBEhERFBYUGBUVGBcTFxMXHRcZGRcdLB0dIB0dLDgoIyMjIyg4MjUtLS01Mj09ODg9PUFBQUFBQUFBQUFBQUFBQf/AABEIASwBLAMBIgACEQEDEQH/xACJAAACAwEBAQAAAAAAAAAAAAABAgMEBQAGBwEAAwEBAAAAAAAAAAAAAAAAAAECAwQQAAEDAwMCBAQFAwMFAQEAAAEAEQIhMQNBEgRRYXGBIgWRoTITscFCUhTw0eFiciPxgjNDJAYVEQEBAAMBAAICAwADAAAAAAAAAREhAjESA0FRYXEygcEi/9oADAMBAAIRAxEAPwDFE5ES21tTopd0ay3CtvJUxLYXJINwRY9k5O64qS5H5hZOhbxl47h6SNNQreDBkzHZimDNtwi+0nsHWeAdm4MJORL+6L+kTdp2Kcxkq2tnN44H3sUjDWTJ8coZawPjHVJwPfeXw4iOSQ5GBmOOVwOxWzjl7L7r64H+PyGf9kv7FF45vnqflZ6zDEgVsUGYPor/ACPbeVgDybLjH/siNP8AVFVRFz2WdlnqpZfCB0W6/FNt2GzvZExcMkZRT+67ZV4Hafl8FwixvRMAZWoNZf2QEU57ProRZqgphAyHrNDUAf1VTRiI+d3ufFD7YFY+k9P0oBBCQ8dEzmIYB0d4FMg2nr+k+absPkgBFzcLjFEFrjzKYGLVTCPaixZOdvXyQiXPUJAG7osCi8UoFWCYcQxdcIm9nRDgqQEa+YRAQh76I+PxTFizfNA/4QCyAsht7ooOBTzSBas3wXbJN1TUuEY/9UApxoSi1BqpPGqAAcln6opIwDZlxKejUQbVARmLqKTmkNLy6dlKSZ0gWjYy/IINtaIDBECLaIinn1XbfT5qZgzIbRfRAeSAe9U+4EROooR+YSbhGZk90xIiQT9JqrUeBEhKJpL8QiJSkXkGow8QoqOWqOvZEZCAI3rbVUlKZlxCNhXxdPHIAIgHUgF1WlIxnKUTY7gfxCIl6CDQPuB6KsJy3OH/APoOZwYiAP3sTB4Trt8CjD3jHmmfuQGGUtY/TXtosLdIUsLg9imJiz1YV8k7MzFT5cx6l3YGouCj6f06rA4fueTjtjmd2E21lDuFv4zCUBOB3QkHjMarHrmxpLkwhZyD4JrmmiDJqAF1JuJ7IbojVRTmSaUS1fWiAmOQW0UXrB/4ywP6TZcCmEZF283TCI5Zbmn6T00+KYOzqU44M0ykaONjiDj9pr8EBwgbkqV2FKFRfdiTtlEiXQp/UQ5oRYIMxYs/xXAAUXCJ2sQ4uyIGwPMgDTqjBCHJ7FNZmspIY4SFJgvZSjDGI/cfFOc2larluiFR+SecZB2DJQI2N+qm6VIXs1UDYBk2yQLAuEpMnEWbugYpdm4MCmAIuPEphDUSQLjxCROrpZIx8ESSD2XTIjFyWAuSmCO1CaC5SE/cDCkOv7v8I+qZ9Q9NwOvin22Ip2QQAkMBQdkSHuuY2RPjRAIwCXTs6kb/AAEGjfV0B4mUgKxsbgWS/e0IcCgPRRbn7JXDOQPFb4Z5TwnUl/JMJUkDXdbxCqibHomEmuSAU8DKyZVHQjxqmiHiSSxIZVtzA1HdNuNK1KZZWAS/qs3zRkbft6KLdcmxt2RDmj1FWRgxdnaxsr/tvuUuIdmV5ceX1jWB/dH81nkFgb9Ur0A7IxLNpzZdPbicDATid0ZBwRqOqiMjJeb4HuM+MRCTzwk1jrE/6VtjkRyAHGXiRSXVY3mxtOsrEpxib+SAlKR9IbqVHjxmbE2Whi4sjEMQBoEsGrxjtqanqu81PkwZMf1tt/ckEY0SujkyOLCcr12xBqSnlxYRP/kJHVRzyiLYxQR6JROUqBR81fBIMeM3G6I6qaOwxaLBRRqGfxUkGVTqi8xPgxb4kOCdCqUOFyDnlx8kTuFQdNpWnwxCOQPUFacohxJq2dbSZjK9fGsA+3zxakFSYzsDSNVq58YlHwWVkx16AKbJPFc35epHHVwUkscZF4luyjBMU4n26Kc5PGPA2EAkX6IExP16aqUSDsky43G4XGnVP45mi+W9kEIAvGQbQGiHIAIEtR0WRzd2M7oyJCn4XLExskVPI6l9TTmBWVu10o3SO+elRD8z3UksQE95Ln9PZKXSsxRLk27VroCQJpdD1EgGiJx0dAFwLX7pT1e2iNWZdIPYsggCLln1dK4FBVBzbRAeBMje/dBwNHXHsFw+a6WLlwlTXsgfFdTyTBhKtbJwXtpZRC6cHvQdEBMCG6jUKTezBv6KgF3FWui7EN8UsHlMTQF3egSnddqMzJQdz6P+KbcdpCcKgKeX4q3w+aePNpPLFI+uPTuO6puGIKJpR08S+jNj14zYjjhPHIHHIPGQUuLltINKncrz/BkceFyaSO4jTsrn39kRM1kbdlyda61+HVxMzf5bmfmRnj2n4lVRlIjvOv0rKhyMmeYxvUm6vTLgRFhoo6tt2uSQ4k7P5qfGQBtCqQlYFWMRBIaqnZrcBXurWPGD6lHhiDeylMiDSwVRNWcWNpbhWq07gFZGLkEN3sFo4sm6DuujnqYc/wBkp5sxWVyJbCtKclmcx9z/AKVHZ/WijKM3Gq6WOYHpVfCQIvqT8ilyciR9ILd1k2sWYyIpLwTRLFtFk/zMu9tNAeit4s8Zh5SqO6346xqsuuf0XncbcJSjWErjoV52GSXH5Bg9AaOvWNDJAxc+r4OvM+74ZYs8ZMwt2dV1zPZ+Rz1+K28GYZsYEvqFk0ol63F1kcPOQInotkSGSImDQhZf9HZikI10XeryR2BiCgGZnqNEgAFn0RZg4RYM66rvRtEEiLPUEFK8tr91MST5IMPpQHz8hj0S6MrWfCw3Cyqkdl0S5ZdTFA/PouQsuPTqqJyYEa2KUUXfigkj1rVESoXqyj3H43RFq6ICR9Ol0z0p5hJ4/UPwR0ca0QDuSWF1NgxjIXl9APxVYVYC5otHEwMYiwYBT31iaa/Xz8rm+Rdxwo8qRiKDxUHKyMrM5ONo81nciW6QD0dc8ma6Gh7bHbCWU3lSJPTVXLu5UHHAjhiGqymdo9TYDuo69VCxBOQhqarS40BECUywCqYYdayKPJzTxsxoLxKPRW7jljanmo81axoRdZODmUDU0I6K0c4mL2RdJkWsM9xJ6W8lqcUnay87izNlYWN16HhkmAkeirip+yaWJrJ5+UREh0C1pLD9wBMj3dk+6j65tShm9NfJVeRyCHuHRBO5jTp0dRZogO5qVMm21JiG8mRJYp8nLw8aIG8A6BUuVyfsQ24yxKyM5zTAyyiftzJEZn6ZGP1N4Otpxlj138XpuP77xt0YyJVnnfb5PHltqGcFeKabbhUC/VbntXKMuPkhIuwoPJa/HExGU6zdjx5GjeS2uFlJJxy6OFh8Ifcw7nqCy1eITHLF1z+dYb2Z5aJIdilkDohkJEii4ZKxECo/FduLIEgIlBgKWXMUCK0umbv5oDyBFwRQqjmxmE20uFtHiZTo/goOVxJfaLhpRsr56xcDrmWMXVAhSSgQoy63YOdcSut4pSXQQuuCCNkAwNeyZ281G6LoC3xQ5lMhyKDxKs4i2SPYpMMdmCPU+o+aMfqBWPVza6+JjmL0pln1WfkO7JHxCt5SIwHU6KmTtMSf3BTyd8bOMmyY5YxcuwH9FV8WTb5aqnz8p2AA/VfwUTnPWFXrHNv6Wz7xhxTIi8uvRT4+fg5N6HUHReZDmtgpvRjjiliyGc5RfLFtuyTn0g/qpV1tfp5xphPuudzT0mMESYF9fFWBP00WFx+YSBvPqGq08OYTjUh1j1xY256lXMRfI7+a9NwXOMLzHGIlma9NF6riBsY8Ajn0vs8WzZ1ne4YXiZAd1oCqXLj3xI6q7zmMObivJcmEoEkB+yqZCwrQGpW/yuK0WIdxQrz/ACMcwSGtZLnnba3MZHKO+R7VVQDMYQxzkftRJIjcRMvqIHdaWbjzaUj9OpVfPB9uyYBAaRAv3ZdU5zNOa+7Vox2gyNNB3Wj7UInIwi26Mm7sqseNjHqyZDM9IhaXtkP/AKBLbsAido6BP44ltLMtkiH2mR+3kgKkErTgbEdlS4+MY+dy8YtuBAH+qqugMDqVx9/7dPP+WpIgtWpAoo5A+ARlATEXDlh2KBjOIr6gNNf8p9eonjgQ7dVwkQWNkoIkaFuxum20SMzVRfXukDx1ou3Da/y1QSrgwykDIUGndPPjQmCJVPRWmAoKRFgo5gBpDzQbx/uHE/j55wajvEn9pss83Xq/euKMvHHIiHnjpLvEry04irrfi5jLuYqM3SlMUpVoH5oErkEB10dEEUBqxk+KLftCALFQ8TIJxGM0lH5hSm4busMbsdc6zzKuGP3IRmbkN4KryhtxggfTIfJXONIHADqKMkzYDOE4g6E/BTLjpV3y7H64nq6qczGd8d5IgQ3gpvbcn3IyH6g278FY52B8Yo3TxTl+PW02fLnTJMYMcRLGJ9J7JBEYzuJB6BGUJbtpuEYYyKxjXqtv+WF/ouMl3WnxMkqdNVRGHJ0utPhwMoOQ0o0U92YX9cuWv7WN2bfpGxXrcJBhHvovL8GP2oiIuvSYZgRiOyy59X9ni5EVCaQdR43NVMQt5NOe3atmxCcW1Xnedxdsnah1XqW0KpczjRyxJAvcovGVc94eWy8YZIHGBSWoVb/+b9u4rq+q2ftHDlqGGvZS5ccZRPX5pT5TS7JWAeBhd7Dp+Ss8bGN0tgYRiUvIMoPF/BWuBHbh3EvLI/yVc29arPqSTTHyz+37tkGmSMX8WV0FyGLuVme4nb7pJv0iFPJavGAyZhS1Vj9k/wDTXi/+WpRm17JhKjMlYMOuiLD4qb6IScYy+oB9Cl25Bb1DobqRo3NAmYgl6vqkEQMZBnaX7TRJtN6XUk4CYbIAR+CT7AZt529P1fFBBmzRxEORu0dRw5EZuJfEaeSzsuWeSZMi50QEyC4NdFc5GWhmyw+2Ys4IIkdGXjuTi+3llC4Bp4L0E8kp3NOioc/B9zFLIPrgHP8AtCrmYqetsQhKVJIFIQtWZUESuQQLly4ICbjy2Z4S0ND5q9kp8WCzohz4LQlUCR1AJWffrb67qxPw8ojPYTSVCrhPqNKC/wAFmxBBEhdX4ZBOD6691l1/DfnzCl7cPtc/JiNN8S3kXW5LH93HKGrU6LJYQ5uLI/WPxC2sEniQbH5Jd+y/wXMxmfyx5YwZ7TH1i5KnxYccdASbqfmYHnviK6qtCR3AjzRnR4WY4I7SAKsxT4sJxlv+ikxkEedeyn27pxgLmpKnZ+LPFxynMCrdVu4ogXVPiQEIAK5uDt1WnMww76zVzHKIYalTKrjiBUmqsAuKLaMaNEvpST3RN0gl5qiwTkcPHmgY2OhWWccsROHJ/wBsltg9LKp7jh3YTkj9UKhk8ZE6s08zzsREgTcllNhO0Y4CjCqbkSGSLm4v5KGeQYo5MnSJI8glzq1fW3nOfl3+455j97D/ALVv+3VAkdWDrypmZz3yNZncfNet4LNiA1iSVl9k3lfF00NdHQIOiZg6PdZKRkC/SyJdu4TU/sllVtWLIDgwD9brqM7f3XU1oAueVnogmJDBPJHdEMNClyYZ42ErnXRaHt7fZkx3REztPZS58UZ3Dg3C1zssMViD+KYgFwQ4NCO2qsy4tfTLyKilhyRLbX7iqMk87zOMeNnOMlwQJQl+6MrKqvTcvhHkcOZlHblwAyxyNHj+qC83JXzco6iNBMUFSSpgEFJjDkdyinEuPEJVY1+CuHHIYoy/S+3zAXRgxvbotDkYhj9r45LbpzJ+Sxt26OZif2oAW1UmGRjJtCoxQpxRipaDyse6JAvdwr/C5BnihI3I9Q76qqC9D5FHjyERKIvGVR4qb4PzlrGO+B1LKkcTglr1/wAKbFm+CJi8qWOqkBjO1zp+JVrhPkykmrKmCBEjrK+q1vbcTYzM+ATkzS6umlgcxTxl/wAl7JMDiHcqxDEQ8itIxMcxjIahSY+X6m+Sz+byI4nJ0ssqHOyGbvQ9VfN2mx6TLygQwVQ8nL9wCNVRHLx7QTKtlWHuGOEix7J3ImHo45vSJnS6mhMZInWMlicfnwyekmhWjgmIVEnibqp1+E9csn3DB/Hylg8SbeOqyPdZiHDlMGkobR1c0Zer9ywfe45kB6o1pdl4r37JGOHDiqdxMvgi+/2Jdf0xBYNovUcAkQwB9fk1V5jGASBYuvR8LKIT45Nozr4KO1c+NwDX5LjfwU2SAJ9JZQkEBzcLOxcrgWDoFybLnp3RPTRIA9PBLuF3oiW0NeiSv7augI8WGGCGzGfS5Z+6ldqNVMIhwKE3XSERe/VM0cscJVIqUn2gHALDopH0JqlsXu6MhFLDuiYyk0SDEnxXjedxZ8XkTwTFYmh6xNpL3TP4aLO949v/AJvG3Y4//RicwH7o6w/sq5uKnqZjxZHVIpZA1ox1SELZkVWOPDdIBQN1Vvilpg0BZqpdeHzNxcZhtJ8lo+8TbFxcWogZHzos/wAA6l9wyHLmBd4whGI8gsHVjxVTgqJyKHxKL2ezUTCzGQePY2QmRh5YP6MoAPY6KOB1Xcs74QHTXVKTeCtxMr8JVpfUK1CQYlZ/HMsmKMrSFD49VZxTckGkte6iz8HLLuJxETLixW1hjsgIdlk4T6oltVqCRcfNPlPbR44Ai5qy7NyjA2cOw8FHhmRGtgs/3TmwwYjLdeg8eiuM1T3b3CBcA0dYf80DV3NVQ5HJnlmTI3KiEmFFrzzhn101/wCZuDOo953/AFXsVngz/ron3SJBFxVXpO2tj5AErsRcrU4vukscgJlxqvMRzmJY+bq5jy48lQWlZlpOeek22Pf8fkDNASjUEXWTz/aeNyN+LLF4yO6EhQw8FT9h5hjnlxZy/wBUfEXC9DnxxMDK8hqo75uLPzFc9beC53s2fgZBkj/ycd236x/3BTYDSDUavmvVyjGQIIEom8TYhed5fClwspEa4Jucctf9pXPnPrbGHoMWTdjjI6gFGMXNbDRQcV/4uLvEFTg9Esh22LkxFeqUspBIODqlaJ6XcoxkZRSidGp1SObqycZZwFFsk/01S+N8GUTndUMV1Znxt2XEOb1XMS4NxZqIUQguzuRdEAhjojcGrFdZnQDi3ijp36pO9x0Tfj01QGB757U5nzeNGt8+Ma/6x+a83KLVuvom1xSvivK+9+2fxcn8jEG4+Q2H/rn08DotOevxUdc/liAMrHGpNxQjVRCPVWOPEAudbKurouJtb1Yao8iJjOv6gD8kWNDqy1Rwo87hwI9GXGGjI6rB0W4eflcnVCJdlZ5HE5GE7MmMg9RUKqxFlcTaeJumkSWa+iijJgkPKGOYYbhqU5LlPXUw9D7VHBmxSwzDGWvRSy4Rw8iInWNhK7qt7QcWcSljkxFxqCtcSOYfay+ki0tSp6iZVHH6Mrd7rSifUG63VLJjlDIRL6gb9Vexucgfp+KjlfSzkyRiHOlaLyv/AOgzfdOOAoASV6PP6Sx8F5v3jEaS2/SXPgr5/wBIvjCJcp4bQNxNlHOhUZkQt2VXcmfGYiMOjOo45TAqsJFFyjBJTN3JN1wyNYsoSjENcJhr+z8mUefilcksfgvoUJieMPV/zXzz2aI/lxlfaCSei9vgmftx8KK+U08qSbXsossIZYnFkgJQOh/JNyJiM661CjGSJLkrl7mLZ/Lfm5kqQREYiIFAGHgEK6JfuRBd0n8iNlKkrnRkQQ7/ADSRnE/SfJM2oQRoyLkXAR3+rbqkjdnLhF6d0/kWFcbRYufxTaPdLqxqn2lu50SUQD1OuI3B+haqYBtboxjc690GSNWDM+gUgiBp5rqwLkPuuj9QeoTBCSCB8EuXHjzY5Yso3QmNsolSGJNDZKIsSbjRIPGc7gZeDyDim5ga4smko/1dDBE0XruVxcPLwnDlFDWEh9UJdQvOx4c+PmOObH9sh9M21BVXrMLmY6LIMAPiVt+0yJwbWFCsfJd1qe0PskGLPQrONOvGjnxicSDqGXnObxZ4yS1NCvTkAhQZMMZhiHBurjN4bOZRltDuyrnEbv4ra954s8HKiYxJx5ABjbWQuPFQcfguXysZdP0x/uVrLJGVzaocfPyOHmGXDLbOPwkOhXsOFzMPueESH/HnF4/2Xk82P7UtprjL7TqOxR4ufJxsoy4rx0dh8UWZEuHr5xmZ7Z0lYd1aj6MjGwA+Kp8D3HDzxjIrlgfV8Fdm8ZxkACGYrLGLtrnSbIIZRT6mWRz8MckNhDEgiq13gYUAYhlT5MDIEX/bT5IwTxHJw5MUzCYoLSSRxQlEzMrXH9l6DmYIAMQGb6TdYXIwSxzLWWsrOxAQEqK5UkQQpIuWiA8pUCSMJS+kK7xcEoyEiHl06IDU9tw/Z2QZ5TPr7Feo45lGAjKhFW8VhcSLGIckk26raxgyMnPpYAdaK+aXUdyy5iRfoeirPXups59Y7BQmtVh9n+q14/zBfquPaqUFEEX+ahQigforeEkwDqnUinwVnjycGP8ATpUJCao1u9HQYAIvW9HSCF3d9LIxJYPXqy4ByDYG/dFrECpumYEWrXqnEmv80NzXBbQpZF5DTxQDzJYN1qhuLs1BQpQw89E9CHBrqEGBlYjqgSGJJA1JOgQlKEI75Foj4+CUCWSQOQbY3jj/ADl37IDmOUftx9/qn/YKLm4oS45O0AwrFWqS/FR5wJ4pgXMSiiPOENI6jutP2klph7Gyz53Vz2s+uVFM9X142COiUG4T3DqMhiqZouTxocjEccwDrA9MgsV5zIZRlKLGG0+oagr071EhpoqvP9vw8wfch6cw1GviqlKx5me0u9jcaqmccT6Mf0AlyLArXzey82cmiHiP0uwKU+z88D/xgCOnZXLEWIPacn8XnQgS2+hI/UdF7ANkxERrIFwvGnhcvj5Bly4iwk+8VHyW97fzo5Y7oyeQ+oaqev2fP6X47ZeoHaRQxJoiQwdwQfklntyDfE7ZfIqGZyASJs1G6pGq8042acfUa+QWFyMuJyNu19FuZnnEmbAMx6/FYvJgJTIiaFVyVZ0iOlD0QGMzBkGYK1HhylL1vtNKKf8AjSBjti4A+SvMThn/AEkNpZaXD2yMQfqOq48aU2Mvqe/ZNHjciDEReIsQlboSVr8WeMSEhV/yWjDLIk/tNFjcfLKMg8WAsOvirg5EpAPRVzZIVltS5csjMtpZRyySDbS4OijEiSx1sV1tVlbm1pJg/wByRDhKZGx+SDgXolDE3UhKJEWKlx5pCQ/BV6WuuH1AumGzGYnHc7HVHb6e3VQ4JgAAv2Kl9XzUKKAWHxRBqXv8kGk1aErmZ6XTDnAug3+URWnSyBkHY9UANgB3CoZR5MgxxeRJkS0Yi8j0CbLmECIxG7LL6Y/megUeMbZGU/VlP1Taw6RGgQYxiZSGXKXkPpiPoh4dT3UwIuNUHY9ih4U0QDgsPNktLFyD0XAsud6gpBhcjH9vJOH7T8lZ9qZ5g1PzT+44xujkAbcGPiLJfbaTkkq3TXFkZgMClHZOHIpfoqZq8vS7eaX1AuKHVNPvpooZZHoD/uKYWoZBJnoUxkJVtKzjVU95BceQ7ITylgQW7oCYzjUEMquXj4d/3IREcmsohifHqhLPV+tx1Uc+SAgnHLKNHbuo5ZpCgNDRQZc0HvdV8komVTW7pg+RwfVkp0uosUcU32g7nIJN3SR3TybYgVo5pddkn/GyDLIEYyds+xTJO8YExFZAByehoCmxiRLkv0VWWaMYyz1IgCJgX2zFPmxWhhA2iejP8UBNjxBnIClMAbWXYyGa6ar9lNUjOPG301ShjSyklavxUO4junCEhjTyQN6oSlbVA3QBIXUiKLmJSzcVGmiAYVD6IgnWvdRxJZSQH+UBqcWsHJopmDXo91XwvCIBt0UjHa7em7KPyr8HJbzSiblio63RFm1NkZGDkjrcqGWY7jiw1nqTaA7/ANkspzmft4SxFMmTSPaPf8FJGEccdsQwuepPUlMBCEYuXeUi8pG8k+0GvwC4ClbrjZ/klk3QG0NI30KJslYmuvVcJVrUIAgfAI9UKDSi7c0DOZYC6IEPKxGeE6yFR5KDggREurq65k1KdVDt2TI6onot0sRPx6JyHqoIyFlPEhuypNJKG+9wq+TGYmocf1dWzeqEoghigM8yYtqo5CR3NorOWIFgqhmYH8UQkcgQa0VbNMRDu50UuXObaKlkJmWA+CYQAZMk3/Voy0YcZojePUn4nHjD1SDk6q+McJChCdpYZMsGyW5qFVeQJbpRnEyxyDFg4jH93i63/wCMCDqNVUz8c4mlodOiUoZPF4vK2z4u0ShkiZQyu1xqtXHA48WOH7YgHxAVeJljnuEjsN46eIVnBlhlfaaj6om4TuzibG5HRlI9KKONExskZZyFlGADagRl0KUU0dBAQRZcCXR6oUdAEsRdtFHKUo6UTEiyalkBGXIpQKXD9YF0rAUZWceAxMZisSlTi5AML/FSMdmiick08wpt4ZtOig0QZROc52wltxa5BefaPbulAOYAyeOH9poZ95du3xVg0bTwTACEYR2xAAFgNAjQ/muYHsUGcEVfUoMSNKMjU2r2QuBqxQBu3WqAkrt6G6Q0NdUzyJAFtSucSBfwZAKDEFiXaxQd5B02zU+QKNGSAOKtVRzG40r0UrCreDfmhSjaWKYqES011UsD8V2bGJDfGhVeOUxIEtLlNK7JrqLfKBoadFBPkREaH5quM4Jdi3UpkvylCYLeazeRERuWCbJyHHpVY75mp+KAiGCeU2orGPiwxmMshaJ1Q3baA9nSyJIYmlgmEmfkRiftwApqFUPIyv6SR4UXZIAkkAgyv4qKMjY0ZBtXic2QhKGUbpfol+IK7JI5PqqqeEeoFWXNOiWAgy4zCrONEw40JQhKJMMkR6Mgu3SXUKd+qaJ6p5LCtDLOM/tZxsmfpP6Zf7SrAkhlxwyRMJjdE6fmqz5OOWkfuYv3XnEf6v7oCebpLVPwTiUZjcC8TYpJDogONq+a4kN0KR7j4Jt2ougOYXF0a+WqDu7rm7oBhc1qr+CuPVZxNH8locSb4yNQppxYxxL7mfspdo29uuq7HtEaJq7r6qFKtXZvFEXK4vdGulewTJ2176WRNfA62QaVtuqNfpF+qDcwADW7o0ugZAlmvquYjx1CAAJLtQpqiwSguHGvnbqnB16oAFrLnbxQJJNBTqV1Dp2TDi3mm1ZtKIAE3oE8W8SkEciwr9JVfIAamLjTqrMgKg+Sq5AxIbuyrKVbIMYDiJ8NF0MMZYJZtIlmdR5JOSLJY5zHBLDo7ugFJDrnp1SOLuiJUVELgUPiEJMRbySyqyBLXNEw6RoxoyUGFyGKWcqFv6CWLH1AqacWoSAPZT0OteiqQNQSrGLFKdRQ6IhVJr0NkVH64SMcoIJs9vJWcfGnkiC7RNindBFuLNpoox6ZOVbnxJwDgu1SEmLAchqPT1SNVPGlGBzcZus8Fge8ehXQyxm7UIpKJ+oeKnz4p4ZMDQm6rZcUZkSEjDKB6Zi/geoTlyRiA7oEFRxyyEhjzDZkP0n9M/8AafyUpqKoBSbovYfNAhzey6hQDMp+PIwyAvQ0Pgq8aFjfRSxdx1dLRtmJYClDYpfv4/vfb/U1lDLLLHijGHqyz9MI9T/hSfxY/Y2P/wAj7/ua/c6qMKITIVFHtRGLij1OqK4wEuodAcHGllxlpqgIyrXwR2/EoARoSD4p5EEtZrlLtBP1dkpBBZtKEIBmAqzaUsi1GXR6ddFxEYuwZAcIm6aMeqABkA9gi5dtEAWb4oMDXUaou5PwSP6yyAOSO6PUqrkqPxVxjfX5KnkcTLplVSUKuLKuYgSbR2V41cKtlHSiZKpfcQdEatS/RDIJCW7QpQT4DsqI5c9ifkmGDNktGgVvh4I7fuTDk1j4d1cYaU8ErTww5YMwJaJpRk+HiykHkW6hapjV7P8ANRSBEhLrdTk8FxcCNC9FqY8WOIaIq1FUxZBZnddHkzJnjIaUJbX6jRMsBzcceRj27tkoGh6SU3FEhggN24gMfFVOUJY5HkweQAbNHVhaYU3t2UZZTIrEgFFEXNfFcwFrJ9kSToT8Fwx1/FSaCeIZBKJA6gqjPi5A9LarUMNRYpTE0aoHXonKGHMCQOPJHdHofkxUBlk45q88J/X+qH+7r4rX5HGf1Q8WVCUMg0VZTgsSCxBcGoIXEAqI4p4zuwihviNj/t6KbHE5YGYBYHbIG8ZftKYGLAOfJOJiHqkaCvkhHHKxCSGGXIzbb4sZ9XSUunkkGpw4SkPv5QxmPRH9sP7lXWht7KLDSDH/AKqRqss1q4ALXRF3RNkAzfimRqEsdEKsdqMfkhWjW1QCiwf4IvESIa9XRq5v3QGyj3ZIzC4apHVdLumDdu6X9Nfm1kwMUdj1JQH+ln06IxsEyBqNqkiHJc2LfBShqpJXDefRIwJrSx1UOWLF3d+qsV/s6gyuwfqfgj+iVpKrlNVZltel9FXltdVCQShKUS3khxsEs8+kI/V/ZXIbW7aruPt/lH7X0t6+nbzTv8BejjiAHHl0TCIs1EwsOi437aLPaiSxxUeTBGUWr1BVhdGyAoCOfE/o3f6hVQyzZpZ4x2HfKjLWG1ze6Po7bvn5JzP6Jl5IcogyjAv0e6vcDjjDhjOUNmSQ9f5KUfVTr8lOHetu6NmAf+tEfCoQ1qmigFD06JJemXink9UmT6a3aiQRm1KpZ44SFRXqiNHQ1HyTCGXHh49EDxxWeOWzIQ268ZR/bOOoUvi/dE7WDI2WlTJmiSOOYDFmkQA5eDfujJWsePHjAjji0RTuq0PsbMn8tt+7/l3dP07U3C+969277H/q3/8Albv28ap/gL8C1wpNPN1DV43fVlNp3Uh//9k="/>
</canvas>
<div id="crop_square"></div>
</div>
<div class="wrap">
<canvas id="area_c2"></canvas>
</div>
I just recently uploaded my code files to a server. My website is a simple html5 drawing application where users are able to draw freely. I have this part done fine, however I am looking to implement a download button that simply downloads whatever the user has drawn as an image directly to their device i.e. phone, table, desktop. I have been looking for solutions to this for hours now and cant find anything. Is it a problem with my server? or anything like that? any help would be much appreciated. Below is my code
<!DOCTYPE html>
<html>
<head>
<title>Elemental</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
#media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
canvas { border: 3px solid #0BF446;
border-radius: 15px 0px 15px 0px;
display: block;
margin: 0 auto;
margin-top: 35px;
background-color:#313131;
position: relative;}
#download{background-color:#04A12B ;
border-radius: 0 15px 0 15px;
padding: 20px 40px;
margin: 0 auto;
display: block;
font-size: 14px;
margin-top: 35px;
color: white;
font-family: 'Montserrat Alternates', sans-serif;}
#clearbutton{background-color:#04A12B ;
border-radius: 0 15px 0 15px;
padding: 20px;
margin: 0 auto;
display: block;
font-size: 14px;
color: white;
font-family: 'Montserrat Alternates', sans-serif;
margin-top: 35px;}
</style>
</head>
<body>
<body onload="init()">
<img src="minilogo.png" id ="logo">
<canvas id="c" width="350px" height="350px"></canvas>
<button id = "download">Download</button>
<input type = "submit" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
<script>
function init() {
// Get the specific canvas element from the HTML document
canvas = document.getElementById('c');
}
function midPointBtw(p1, p2) {
return {
x: p1.x + (p2.x - p1.x) / 2,
y: p1.y + (p2.y - p1.y) / 2
};
}
function getPattern() {
return ctx.createPattern(img, 'repeat');
}
var el = document.getElementById('c');
var ctx = el.getContext('2d');
ctx.lineWidth = 30;
ctx.lineJoin = ctx.lineCap = 'round';
var img = new Image;
img.onload = function() {
ctx.strokeStyle = getPattern();
};
img.src = "https://i.postimg.cc/rF2R0GRY/dick2.png";
var isDrawing, points = [];
var getXY = function(e) {
var source = e.touches ? e.touches[0] : e;
return {
x: source.clientX,
y: source.clientY
};
};
var startDrawing = function(e) {
isDrawing = true;
points.push(getXY(e));
event.preventDefault();
};
var keepDrawing = function(e) {
if (!isDrawing) return;
points.push(getXY(e));
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var p1 = points[0];
var p2 = points[1];
ctx.moveTo(p1.x, p1.y);
for (var i = 1, len = points.length; i < len; i++) {
var midPoint = midPointBtw(p1, p2);
ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
p1 = points[i];
p2 = points[i + 1];
}
ctx.lineTo(p1.x, p1.y);
ctx.stroke();
event.preventDefault();
};
var stopDrawing = function() {
isDrawing = false;
points = [];
};
el.addEventListener('touchstart', startDrawing);
el.addEventListener('mousedown', startDrawing);
el.addEventListener('touchmove', keepDrawing);
el.addEventListener('mousemove', keepDrawing);
el.addEventListener('touchend', stopDrawing);
el.addEventListener('mouseup', stopDrawing);
function clearCanvas(canvas,ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath()
}
</script>
</body>
</html>
You can use the Canvas#toDataURL method to generate a URL containing all the data of the canvas's current image. This can then be used in place of any URL -- a link's href, a window.open, etc. For a download link, you can use the download attribute on a link, which is an HTML5 addition. The value of the download attribute is the filename that will be used as the default save filename.
So to put all that together:
<a id='downloadLink' download='myDrawing.png'>Download Image</a>
<script>
function createDownload() {
const downloadURL = document.getElementById('c').toDataURL();
document.getElementById('downloadLink').href = downloadURL;
}
</script>
I have a canvas that is the only thing on a page I want really want to see. I'm trying to make it such that when I resize my window, I always have the entire canvas viewable with no scroll bars and maintain the aspect ratio.
MCVE
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w = canvas.width;
let h = canvas.height;
ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.rect(5, 5, w - 5, h - 5);
ctx.stroke();
* {
background-color: white;
max-height: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
div#canvasDiv {}
canvas#canvas {
display: block;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="canvasDiv">
<canvas id="canvas" width="500" height="500" />
</div>
</body>
</html>
All here at jsfiddle
With this attempt, it rescales just fine when I resize the width. However, when I resize the height, I get overflow.
Resize Width with appropriate rescaling
Resize Height with unwanted overflow
You may like to read this article: [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w = canvas.width;
let h = canvas.height;
ctx.fillStyle = 'teal';
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.rect(5, 5, w - 5, h - 5);
ctx.stroke();
* {
background-color: white;
max-height: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
canvas#canvas {
display: block;
margin: auto;
position:absolute;
top:0;bottom:0;
left:0;
right:0;
}
<div id="canvasDiv">
<canvas id="canvas" width="500" height="500"/>
</div>
I'm having trouble trying to figure out how to center the canvas in the page. The canvas's code is in a javascript file. Here's the html for the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Game Tut</title>
</head>
<body>
<script src="game.js"></script>
</body>
</html>
I've tried something like this in the javascript file.
var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.tabindex = 0;
canvas.style = "position: absolute; top: 50px; left: 50px; border:2px solid blue"
document.addEventListener('keydown', doKeyDown, true);
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
For some reason the blue border or the positioning don't seem to show up in Google Chrome.
var canvas = document.getElementsByName("canvas")[0];
var style = canvas.style;
style.marginLeft = "auto";
style.marginRight = "auto";
var parentStyle = canvas.parentElement.style;
parentStyle.textAlign = "center";
parentStyle.width = "100%";
OR
canvas.style = "position:absolute; left: 50%; width: 400px; margin-left: -200px;";
Try this:
var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.tabindex = 0;
canvas.setAttribute('style', "position: absolute; left: 50%;margin-left:-400px; top: 50%;margin-top:-300px; border:2px solid blue");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
document.addEventListener('keydown', doKeyDown, true);
Try this
the code below made the canvas center
canvas.style = "position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; border:2px solid blue";
By the way
document.addEventListener('keydown', doKeyDown, true);
I posted your code but chrome showed the 'doKeyDown' function is undefined so maybe you need to fix this error then your canvas will show correctly.
Error showed