Image used: https://i.imgur.com/5KYZ1M2.jpg
Code:
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(media, canvas.width / 2, 0, canvas.width, canvas.height);
The result: https://imgur.com/wywJZ69
Is there a way to only get the left image and center it?
You should use the optional parameters of drawImage, by doing it this way your canvas can be at any size, so it should be:
context.drawImage( media, 0, 0, media.width / 2, media.height, 0, 0, canvas.width, canvas.height);
var my_canvas = document.getElementById('canvas'),
context = my_canvas.getContext("2d");
let media = new Image();
media.src = 'https://i.imgur.com/5KYZ1M2.jpg';
media.onload = function() {
context.drawImage( media, 0, 0, media.width / 2, media.height, 0, 0, canvas.width, canvas.height);
}
canvas {
border: 1px dotted black;
width: 200px;
height: 200px;
}
<canvas id="canvas" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
You can read more information about drawImagehere
I have made an example in a Codepen, the canvas element is half the width of the image and then the image is aligned left & top. ctx.drawImage(img, 0, 0);
Related
This question already has an answer here:
CanvasContext2D drawImage() issue [onload and CORS]
(1 answer)
Closed 5 months ago.
const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = 'lightgreen';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let image = document.createElement('img');
image.src = 'https://www.pngplay.com/wp-content/uploads/5/Alphabet-C-Transparent-File.png';
document.body.appendChild(image);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0, 500, 500);
ctx.fillRect(100, 100, 50, 50);
canvas {
border: 1px solid black;
}
If I use ctx.drawImage(...) with the canvas created in js, it will not work.
If I use fillRect(...), it does draw rectangle as intended.
At least in Vscode. It doesn't draw rectangle in this code snippet thing.
I cannot figure out why this is.
Does anyone know why?
You need to wait until the image hs loaded before drawing it on the canvas.
This snippet adds an event listener to the img element and draws it when the load event fires.
const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = 'lightgreen';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let image = document.createElement('img');
image.src = 'https://www.pngplay.com/wp-content/uploads/5/Alphabet-C-Transparent-File.png';
document.body.appendChild(image);
ctx.clearRect(0, 0, canvas.width, canvas.height);
image.addEventListener('load', function() {
ctx.drawImage(image, 0, 0, 500, 500);
ctx.fillRect(100, 100, 50, 50);
});
canvas {
border: 1px solid black;
}
I'm programming a canvas image to be able to zoom in/out after the control button is clicked.
The red ball normal size is 128x128px. when Zooming in too much...the image is clipped by its own container...how do I fix this?
working fiddle https://jsfiddle.net/vf8gvq7m/27/
This is what I've tried...
I want the zoom in to be correct without clipped image...
let M_GlassesZoom=1;
let L_GlassesZoom=1;
$('.ZoomGlasses').on("click",function(event) {
if($(this).hasClass("ZoomGlassesPlus")){
M_GlassesZoom+=0.5;
}
else if($(this).hasClass("ZoomGlassesLess")){
L_GlassesZoom+=0.5;
}
drawMe();
});
var canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');
// core drawing function
var drawMe = function() {
var ImgGlasses = document.getElementById('glasses');
canvas.width = 400;
canvas.height = 400;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,canvas.width, canvas.height);
var GlassesWidth=128;
var GlassesHeight=128;
if(M_GlassesZoom!=1){
GlassesWidth=GlassesWidth/M_GlassesZoom;
GlassesHeight=GlassesHeight/M_GlassesZoom;
}
if(L_GlassesZoom!=1){
GlassesWidth=GlassesWidth*L_GlassesZoom;
GlassesHeight=GlassesHeight*L_GlassesZoom;
}
ctx.drawImage(ImgGlasses, 0, 0, GlassesWidth, GlassesHeight, 50, 50, 128,128);
}
drawMe();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="ZoomGlasses ZoomGlassesPlus">zoom +</button>
<button class="ZoomGlasses ZoomGlassesLess">zoom -</button><br/>
<canvas id="cv"></canvas>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Japan_small_icon.png" style="height:70px;width:70px;opacity:0" height=70 width=70 id="glasses" />
You have the destination width/height fixed to 128px so when the ball gets bigger than that it will get clipped. Naturally, the source width and height should be fixed and the destination calculated.
let M_GlassesZoom=1;
let L_GlassesZoom=1;
$('.ZoomGlasses').on("click",function(event) {
if($(this).hasClass("ZoomGlassesPlus")){
M_GlassesZoom+=0.5;
}
else if($(this).hasClass("ZoomGlassesLess")){
L_GlassesZoom+=0.5;
}
drawMe();
});
var canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');
// core drawing function
var drawMe = function() {
var ImgGlasses = document.getElementById('glasses');
canvas.width = 400;
canvas.height = 400;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,canvas.width, canvas.height);
var GlassesWidth=128;
var GlassesHeight=128;
if(M_GlassesZoom!=1){
GlassesWidth=GlassesWidth/M_GlassesZoom;
GlassesHeight=GlassesHeight/M_GlassesZoom;
}
if(L_GlassesZoom!=1){
GlassesWidth=GlassesWidth*L_GlassesZoom;
GlassesHeight=GlassesHeight*L_GlassesZoom;
}
ctx.drawImage(ImgGlasses, 0, 0, 128,128, 50, 50, GlassesWidth, GlassesHeight);
}
drawMe();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="ZoomGlasses ZoomGlassesPlus">zoom +</button>
<button class="ZoomGlasses ZoomGlassesLess">zoom -</button><br/>
<canvas id="cv"></canvas>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Japan_small_icon.png" style="height:70px;width:70px;opacity:0" height=70 width=70 id="glasses" />
I would like to know if there's a way to draw an image into a canvas using a CSS3 Matrix3D transformation. The used context is a 2D one used to render stacked layers and an image layer transformed with a matrix3D above it (because I didn't manage to have it drawn in the canvas).
So basically what I want to achieve is to convert transform: matrix3d(0.87, 0, 0.5, -0.00025, 0, 1, 0, 0, -0.5, 0, 0.87, 0, 0, 550, 0, 1) into a drawing canvas method in a 2D context.
Is it possible ? For now, I'm quite fine with the CSS3 layer above the canvas but the application I'm developing will have to export the canvas to an actual image file (meant to be sent to the user).
Here's a snippet illustrating my current way of displaying the transformed layer. So the goal here is to actually render the "placeholder" transformed image into the canvas
#canvas {
background: tomato;
height: 100vh;
width: 100vw;
position: relative;
}
.viewport .transformed-layer {
height: 72%;
position: absolute;
left: 35%;
top: calc(21% - 550px);
-webkit-transform: rotate(-1.5deg) matrix3d(0.87, 0, 0.5, -0.00025, 0, 1, 0, 0, -0.5, 0, 0.87, 0, 0, 550, 0, 1);
transform: rotate(-1.5deg) matrix3d(0.87, 0, 0.5, -0.00025, 0, 1, 0, 0, -0.5, 0, 0.87, 0, 0, 550, 0, 1);
opacity: .9;
}
<div class='viewport'>
<div id='canvas'>This is a div simulating the canvas element with some drawed image</div>
<img class='transformed-layer' src='http://via.placeholder.com/300x300' />
</div>
There is one heck of hack that may not fit any future-readers requirements, but which may do for you:
The canvas can draw SVG images, and SVG images can be transformed via CSS.
So you could convert your current canvas to a dataURL, set this dataURL as the href of an SVGImage element, on which you would apply the CSSTransform, before exporting all this as an svg image that you'll draw back on a canvas.
Here is a rough proof of concept:
function getTransformedCanvas(canvas, CSSTransform){
return new Promise(function(res, rej){
var dim = getTransformedDimensions(canvas, CSSTransform);
var xlinkNS = "http://www.w3.org/1999/xlink",
svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg'),
defs = document.createElementNS(svgNS, 'defs'),
style = document.createElementNS(svgNS, 'style'),
image = document.createElementNS(svgNS, 'image');
image.setAttributeNS(xlinkNS, 'href', canvas.toDataURL());
image.setAttribute('width', canvas.width);
image.setAttribute('height', canvas.height);
style.innerHTML = 'image{transform:'+CSSTransform+';}';
svg.appendChild(defs);
defs.appendChild(style);
var rect = document.createElement('rect');
svg.appendChild(image);
svg.setAttribute('width', dim.width);
svg.setAttribute('height', dim.height);
var svgStr = new XMLSerializer().serializeToString(svg);
var img = new Image();
img.onload = function(){res(img)};
img.onerror = rej;
img.src = URL.createObjectURL(new Blob([svgStr], {type:'image/svg+xml'}));
});
}
function getTransformedDimensions(canvas, CSSTransform){
var orphan = !canvas.parentNode;
if(orphan) document.body.appendChild(canvas);
var oldTrans = getComputedStyle(canvas).transform;
canvas.style.transform = CSSTransform;
var rect = canvas.getBoundingClientRect();
canvas.style.transform = oldTrans;
if(orphan) document.body.removeChild(canvas);
return rect;
}
// create a simple checkerboard
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 30;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'orange';
ctx.fillRect(0,0,15, 15);
ctx.fillRect(15,15,15, 15);
var pattern = ctx.createPattern(canvas, 'repeat');
canvas.width = canvas.height = 300;
ctx.fillStyle = pattern;
ctx.fillRect(0,0,300,300);
getTransformedCanvas(canvas,
'translateY(-540px) rotate(-1.5deg) matrix3d(0.87, 0, 0.5, -0.00025, 0, 1, 0, 0, -0.5, 0, 0.87, 0, 0, 550, 0, 1)'
)
.then(function(img){
inScreen.width = img.width;
inScreen.height = img.height;
inScreen.getContext('2d').drawImage(img, 0,0);
})
.catch(console.error);
canvas {
border:1px solid;
}
<canvas id="inScreen"></canvas>
But note that old versions of IE did taint the canvas whenever an svg iamge was drawn on it...
In HTML5 canvas, I have a wheel, that I'm trying to spin, however the wheel is acting really crazy. It's being swung around the screen, out of it and into it again.
var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://www.roulette30.com/wp-content/uploads/americanroulette.png";
ctx.drawImage(img, 70, 70, 200, 200);
function spinWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(0, 0, canvas.width, canvas.height);
ctx.rotate(1 * Math.PI / 180);
ctx.drawImage(img, 70, 70, 200, 200);
}
setInterval(spinWheel, 0);
#my-canvas {
border: 1px solid black;
}
<!--<img id="my-image" height="200" width="200" src="http://www.roulette30.com/wp-content/uploads/americanroulette.png">
-->
<canvas id="my-canvas" width="400" height="400"></canvas>
I was certain that if I called the translate method, I could always have the wheel positioned in the center of the screen. Along with rotate, this was sure to work.
Any insights will be welcomed.
You need to translate outside of your spin code, to half width/height for dead center.
var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://www.roulette30.com/wp-content/uploads/americanroulette.png";
var speed = 1; // adding increases speed
var loop = true;
ctx.translate(canvas.width/2, canvas.height/2);
function spinWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.rotate(speed * Math.PI / 180);
ctx.drawImage(img, -(img.width/2), -(img.height/2));
if (loop) requestAnimationFrame(spinWheel);
}
spinWheel();
#my-canvas {
border: 1px solid black;
}
<canvas id="my-canvas" width="400" height="400"></canvas>
I've seen a few tricks on how you resize an image you want to
use inside an IMG-tag but I want to have an image variable inside
a Javascript, resize it and then use the image inside a
context.createPattern(image, "repeat"). I have not found any hint
on how to do that.
You can find a functional demo at http://karllarsson.batcave.net/moon.html
with images on what I want to do.
The solution from Loktar looks good. I haven't had the time yet to fix the
correct aspect but now I know how to do it. Thank you once again. Here is an
working demo http://karllarsson.batcave.net/moon2.html
This is the two lines I don't get to work as I want them too.
image.width = side * 2;
image.height = side * 2;
function drawShape() {
try {
var canvas = document.getElementById('tutorial');
var image = new Image();
image.src = "http://xxx.yyy.zzz/jjj.jpg";
image.width = side * 2;
image.height = side * 2;
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ctx.createPattern(image, "repeat");
ctx.beginPath();
var centerX = canvas.width / 2 - side / 2;
var centerY = canvas.height / 2 - side / 2;
ctx.rect(centerX, centerY, side, side);
ctx.fill();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
} catch (err) {
console.log(err);
}
}
What you can do is make a temporary canvas, and copy the image to it with the dimensions you require, and then use that temporary canvas as the pattern rather than the image itself.
Live Demo
First create the canvas
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = side*2;
tempCanvas.height = side*2;
Now draw the image to it, making the the scaled size you require
tCtx.drawImage(image,0,0,image.width,image.height,0,0,side*2,side*2);
And now use the canvas you just created as the pattern
ctx.fillStyle = ctx.createPattern(tempCanvas, "repeat");
Full code
edit created a more generic reusable example
function drawPattern(img, size) {
var canvas = document.getElementById('canvas');
canvas.height = 500;
canvas.width = 500;
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = size;
tempCanvas.height = size;
tCtx.drawImage(img, 0, 0, img.width, img.height, 0, 0, size, size);
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ctx.createPattern(tempCanvas, 'repeat');
ctx.beginPath();
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fill();
}
var img = new Image();
img.src = "http://static6.depositphotos.com/1070439/567/v/450/dep_5679549-Moon-Surface-seamless.jpg";
img.onload = function(){
drawPattern(this, 100);
}
There is another way, which worked great for me:
const ctx: CanvasRenderingContext2D;
const patternAsBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGRjIyRTA3RDgyNkUxMUU5ODQ1QUM2QjE5RUMzRTMwRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjIyRTA3RTgyNkUxMUU5ODQ1QUM2QjE5RUMzRTMwRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZGMjJFMDdCODI2RTExRTk4NDVBQzZCMTlFQzNFMzBEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZGMjJFMDdDODI2RTExRTk4NDVBQzZCMTlFQzNFMzBEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+y2y13AAAAV1JREFUeNqc0kFLAkEUB/B9b1ZR1m4FQZeocx2MYI3CxC8QmVBfJAjqVLQQfY/MFI+dREpQIeqQxwgiCrq72661M9Nb0ZKo3dU5zOU//Hj/3Qep04YUn04Ludxq7mdflYCzfFKbprdnLKatc9u8Z1zZbBxkHwc58q79gpGYLgBKqaPqTBB4s5t5Ewx2XNu8YvHEImeysnJYnf8GoyCz/MO+ZXFN56iUw6JSxW333SJ0YoEzpbJq1Oe8DLxLN2qzQoqSGkss8a41Un1wZUGNa2mq346A3IBB6KGSUOahdqeFEsZAO20YDnXjktDomKgoUMM0/A6HJ3UJZSNOCn+FPVSIMv3FpOuYTSaUfGj0v/AH1ZLcsZoYEgW/sF+/TPUJNUOh6Be29jJPAJijlbgjNEV7ehG0p6CEOIP62K/v900xXyyyILA3KWJO2FbgpPj8MHm+dnw9FRp1/Ot/CTAAd/XmF3ta0fUAAAAASUVORK5CYII=';
const imagePattern = new Image();
imagePattern.onload = () => {
const pattern: CanvasPattern = ctx.createPattern(imagePattern, 'repeat-y');
const svgMatrix: SVGMatrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();
svgMatrix.scale(0.5);
pattern.setTransform(svgMatrix);
}
imagePattern.src = patternAsBase64;
Basically the same as setting the transform matrix to this (the following down under) (But attention! patterns setTransform method awaits a SVGMatrix.
This did still work for me, too in Chrome (But TypeScript complained of course):
pattern.setTransform({
a: 0.5, // Horizontal scaling. A value of 1 results in no scaling.
b: 0, // Vertical skewing.
c: 0, // Horizontal skewing.
d: 0.5, // Vertical scaling. A value of 1 results in no scaling.
e: 0, // Horizontal translation (moving).
f: 0 // Vertical translation (moving).
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
});
Keep in mind, that you also maybe need to translate your canvas before drawing the pattern, otherwise it could not start where you want it to start to.
const offset_x: number = positionXOfElement;
const offset_y: number = positionYOfElement;
// offset
ctx.translate(offset_x, offset_y);
// draw
ctx.fillStyle = pattern;
roundRect.fill();
//ctx.fillRect(0, 0, 300, 300);
// undo offset
ctx.translate(-offset_x, -offset_y);
Here is another way to resize pattern on image with range button.
var img1 = new Image, img2 = new Image, cnt = 2,
canvas = document.getElementById("canvas"),
canvas_original = document.getElementById("canvas_original"),
ctx_original = canvas_original.getContext("2d"),
ctx = canvas.getContext("2d");
img1.onload = img2.onload = function() {if (!--cnt) go()};
img1.src = "https://www.itailor.co.uk/images/product/shirt/it1823-1.png"; // shirt
img2.src = "https://i.stack.imgur.com/tkBVh.png"; // pattern
function go(source = null) {
canvas.width = document.getElementById("first").clientWidth;
canvas.height = window.innerHeight / 2;
canvas_original.width = document.getElementById("second").clientWidth;
canvas_original.height = window.innerHeight / 2;
var oc = document.createElement('canvas'), octx = oc.getContext('2d');
var cur = {
width: Math.floor(img1.width * 0.5),
height: Math.floor(img1.height * 0.5)
}
oc.width = cur.width;
oc.height = cur.height;
octx.drawImage(img1, 0, 0, cur.width, cur.height);
while (cur.width * 0.5 > document.getElementById("first").clientWidth) {
cur = {
width: Math.floor(cur.width * 0.5),
height: Math.floor(cur.height * 0.5)
};
octx.drawImage(oc, 0, 0, cur.width * 2, cur.height * 2, 0, 0, cur.width, cur.height);
}
ctx_original.drawImage(oc, 0, 0, cur.width, cur.height, 0, 0, canvas.width, canvas.height);
//****//
var rate = $('#rate').val();
var tempCanvas = document.createElement("canvas"),
tCtx = tempCanvas.getContext("2d");
tempCanvas.width = canvas.width / 4 * rate;
tempCanvas.height = canvas.height / 4 * rate;
tCtx.drawImage(img2, 0, 0, img2.width, img2.height, 0, 0, tempCanvas.width, tempCanvas.height);
//****//
if (source !== null) {
ctx.fillStyle = ctx.createPattern(tempCanvas, "repeat");
}
else {
ctx.fillStyle = ctx.createPattern(tempCanvas, "repeat");
}
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "multiply";
ctx.drawImage(oc, 0, 0, cur.width, cur.height, 0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(oc, 0, 0, cur.width, cur.height, 0, 0, canvas.width, canvas.height);
}
HTML Markup
<div class="container" style="width: 100%; padding-right: 0 !important; padding-left: 0 !important;">
<div id="clothesDiv" class="col-lg-2" style="max-height: 100vh; overflow-y: auto;">
</div>
<div class="col-lg-10">
<div class="row" style="margin-right: 0 !important; margin-left: 0 !important; border: 0.5px solid black;">
<div id="first" class="col-lg-6" style="padding-right: 0 !important; padding-left: 0 !important;">
<canvas id="canvas_original"></canvas>
</div>
<div id="second" class="col-lg-6" style="padding-right: 0 !important; padding-left: 0 !important;">
<canvas id="canvas"></canvas>
</div>
</div>
<div class="row" style="margin-right: 0 !important; margin-left: 0 !important;">
<div class="col-lg-offset-3 col-lg-6">
<p class="text-center">Desen Ölçeklendirme</p>
<input id="rate" type="range" min="1" max="4" value="4" onchange="resizePattern()"/>
</div>
</div>
And function
function resizePattern() {
go();
}
You can tweak it to see different results.