Canvas box-shadow pixel art generator
How do I make an canvas box-shadow pixel art generator?
What is a canvas box-shadow pixel art generator? How do you make a canvas box-shadow pixel art generator? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.
Canvas box-shadow pixel art generator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas box-shadow pixel art generator</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #eaeaea;
}
#drawing-board { width: 960px; margin: 25px auto; border: 1px solid #ddd; background: #fff; padding: 10px; overflow: auto;
}
#draw-bg { width: 320px; height: 320px; float: left;
}
#draw { display: block; width: 320px; height: 320px;
}
#drawing { background: #fff; width: 308px; height: 318px; border: 1px solid #ddd; margin: 0 10px; padding: 0; float: left; resize: none; font: normal 1em/1 monospace;
}
#output { background: #fff; width: 308px; height: 318px; border: 1px solid #ddd; margin: 0; padding: 0; float: left; resize: none; font: normal 1em/1 monospace;
}
#clear-all { margin: 10px 0 0 0; float: left;
}
#generate-code { margin: 10px 0 0 0; float: right;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="drawing-board"> <div id="draw-bg"><canvas id="draw" width="320" height="320">Browser does not support canvas</canvas></div> <div id="drawing"><div class="pixels"></div></div> <textarea id="output"></textarea> <button id="clear-all">Clear all</button> <button id="generate-code">Generate code</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Canvas box-shadow pixel art generator - Script Codes CSS Codes
body { background: #eaeaea;
}
#drawing-board { width: 960px; margin: 25px auto; border: 1px solid #ddd; background: #fff; padding: 10px; overflow: auto;
}
#draw-bg { width: 320px; height: 320px; float: left;
}
#draw { display: block; width: 320px; height: 320px;
}
#drawing { background: #fff; width: 308px; height: 318px; border: 1px solid #ddd; margin: 0 10px; padding: 0; float: left; resize: none; font: normal 1em/1 monospace;
}
#output { background: #fff; width: 308px; height: 318px; border: 1px solid #ddd; margin: 0; padding: 0; float: left; resize: none; font: normal 1em/1 monospace;
}
#clear-all { margin: 10px 0 0 0; float: left;
}
#generate-code { margin: 10px 0 0 0; float: right;
}
Canvas box-shadow pixel art generator - Script Codes JS Codes
$(document).ready(function () { var canvas = document.getElementById('draw'), context = canvas.getContext('2d'), color = '#000000', pixel_size = 10, canvas_width = canvas.width, canvas_height = canvas.height; $('#draw').mousedown(function (e) { e.preventDefault(); position = getPosition(e); var cx = (Math.floor(position.x / pixel_size) * pixel_size), cy = (Math.floor(position.y / pixel_size) * pixel_size); if (position.x + pixel_size > canvas_width) { cx = canvas_width - pixel_size; } if (position.y + pixel_size > canvas_height) { cy = canvas_height - pixel_size; } if (e.ctrlKey || e.metaKey) { drawPixel(cx, cy, null, true); } else { drawPixel(cx, cy, color); } }); $('#clear-all').on('click', function (e) { e.preventDefault(); context.clearRect(0, 0, canvas_width, canvas_height); }); $('#generate-code').on('click', function (e) { e.preventDefault(); var shadow = [], min_width = canvas_width, min_height = canvas_height, max_width = 0, max_height = 0; for (var i = 0; i < canvas_height; i += pixel_size) { for (var j = 0; j < canvas_width; j += pixel_size) { var data = context.getImageData(j, i, pixel_size, pixel_size).data; if (data[0] != 255 && data[1] != 255 && data[2] != 255 && data[3] != 0) { if ((j + pixel_size) < min_width) { min_width = (j + pixel_size); } if ((i + pixel_size) < min_height) { min_height = (i + pixel_size); } if ((j + (pixel_size * 2)) > max_width) { max_width = (j + (pixel_size * 2)); } if ((i + (pixel_size * 2)) > max_height) { max_height = (i + (pixel_size * 2)); } shadow.push((j + pixel_size) + 'px ' + (i + pixel_size) + 'px #' + (data[2] | (data[1] << 8) | (data[0] << 16) | (1 << 24)).toString(16).slice(1)); } } } shadow = shadow.join(',\n\t\t'); $('#drawing .pixels').css({ 'display': 'block', 'width': pixel_size, 'height': pixel_size, 'margin': '-' + min_height + 'px ' + max_width + 'px ' + max_height + 'px -' + min_width + 'px', 'box-shadow': shadow }); $('#output').val('.pixels {\n\tdisplay: block;\n\twidth: ' + pixel_size + 'px;\n\theight: ' + pixel_size + 'px;\n\tmargin: -' + min_height + 'px ' + max_width + 'px ' + max_height + 'px -' + min_width + 'px;\n\tbox-shadow: \n\t\t' + shadow + ';\n\}'); }); function drawPixel(x, y, color, clear) { if (clear == null) clear = false; context.fillStyle = color; if (clear) { context.clearRect(x, y, pixel_size, pixel_size); } else { context.fillRect(x, y, pixel_size, pixel_size); } } function getPosition(e) { var targ; if (!e) { e = window.event; } if (e.target) { targ = e.target; } else if (e.srcElement) { targ = e.srcElement; } if (targ.nodeType == 3) { targ = targ.parentNode; } var x = Math.floor(e.pageX - $(targ).offset().left); var y = Math.floor(e.pageY - $(targ).offset().top); return { "x": x, "y": y }; }; /* Build a 10x10 grid with markers every 50th pixel and set it as a background behind the canvas */ function buildGrids(gridPixelSize, gridColor, gridGap) { var canvas = document.createElement("canvas"); canvas.width = $('#draw').width(); canvas.height = $('#draw').height(); var ctx = canvas.getContext('2d'); ctx.lineWidth = 0.5; ctx.strokeStyle = gridColor; for (var i = 0; i <= canvas.height; i = i + gridPixelSize) { ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(canvas.width, i); if (i % parseInt(gridGap) == 0) { ctx.lineWidth = 2; } else { ctx.lineWidth = 0.5; } ctx.closePath(); ctx.stroke(); } for (var j = 0; j <= canvas.width; j = j + gridPixelSize) { ctx.beginPath(); ctx.moveTo(j, 0); ctx.lineTo(j, canvas.height); if (j % parseInt(gridGap) == 0) { ctx.lineWidth = 2; } else { ctx.lineWidth = 0.5; } ctx.closePath(); ctx.stroke(); } var uri = canvas.toDataURL('image/png'); $('#draw-bg').css('background-image', 'url(' + uri + ')'); } buildGrids(pixel_size, "#ddd", (pixel_size * 5));
});
Developer | Ludvig Lindblom |
Username | ludviglindblom |
Uploaded | July 25, 2022 |
Rating | 3.5 |
Size | 3,678 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Rainy days | 227,548 Kb |
I Am Left logo as a scalable canvas | 2,240 Kb |
JQuery countdown plugin | 4,195 Kb |
SaSS pattern | 7,900 Kb |
Starburst | 3,581 Kb |
Just another responsive layout | 3,660 Kb |
Canvas animation | 2,386 Kb |
Optical illusion - Motion Binding | 3,875 Kb |
CSS loading spinners | 2,163 Kb |
Css arrows and pies | 2,584 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
Blank Starter | Mhartington | 2,171 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
A cube | KyleDavidE | 18,627 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!