https://jsokit.com/blog/tags/canvas/ Recent content in Canvas on JsonKit Blog Hugo en © 2025 JsonKit Mon, 11 May 2026 15:05:34 +0000 https://jsokit.com/blog/posts/browser-based-web-screenshots-from-getdisplaymedia-api-to-canvas-implementation/ Mon, 11 May 2026 15:05:34 +0000 https://jsokit.com/blog/posts/browser-based-web-screenshots-from-getdisplaymedia-api-to-canvas-implementation/ Browser-Based Web Screenshots: From getDisplayMedia API to Canvas Implementation I recently built a web screenshot tool, thinking it’d be straightforward. Spoiler: I hit several gotchas. Here’s what I learned, in case you’re tackling the same problem. Choosing a Screenshot Approach There are three common approaches for web screenshots: Server-side - Use Puppeteer/Playwright to render and capture on the server html2canvas - Frontend library that converts DOM to Canvas getDisplayMedia API - Native browser screen capture API Each has trade-offs: https://jsokit.com/blog/posts/from-reed-solomon-to-canvas-building-a-high-quality-qr-code-generator/ Fri, 24 Apr 2026 15:29:48 +0000 https://jsokit.com/blog/posts/from-reed-solomon-to-canvas-building-a-high-quality-qr-code-generator/ From Reed-Solomon to Canvas: Building a High-Quality QR Code Generator A recent project required “nicer looking” QR codes. Most tools I found just produced black-and-white squares or slapped a logo on top. I wanted something more refined, so I dug into QR code internals. QR Code: More Than Black and White QR Code (Quick Response Code) was invented by Denso Wave in 1994. A QR Code contains: Position Markers: Three corner squares for orientation Timing Patterns: Alternating black/white lines for alignment Version Info: QR code size (versions 1-40) Format Info: Error correction level and mask pattern Data Area: Actual content The key is Reed-Solomon error correction. https://jsokit.com/blog/posts/building-a-placeholder-image-generator-with-canvas-api-from-basics-to-performance/ Wed, 22 Apr 2026 17:56:14 +0000 https://jsokit.com/blog/posts/building-a-placeholder-image-generator-with-canvas-api-from-basics-to-performance/ Building a Placeholder Image Generator with Canvas API: From Basics to Performance As a frontend developer, I often need placeholder images: design assets aren’t ready, images are missing, or I’m building a quick prototype. I used to rely on services like placehold.co or picsum.photos, but network issues or specific style requirements led me to build my own. Canvas API Basics The core is the Canvas API. Here’s the simplest implementation: https://jsokit.com/blog/posts/placeholder-image-generator-from-canvas-api-to-smart-layout-implementation/ Sun, 12 Apr 2026 16:20:53 +0000 https://jsokit.com/blog/posts/placeholder-image-generator-from-canvas-api-to-smart-layout-implementation/ Placeholder Image Generator: From Canvas API to Smart Layout Implementation When developing new features or designing prototypes, we often need placeholder images to fill areas where real images aren’t ready yet. Instead of hunting for images on Unsplash every time, why not build your own placeholder image generator? This article dives deep into the implementation details, covering Canvas binding, adaptive font sizing, grid backgrounds, and more. Why Build a Placeholder Image Generator? https://jsokit.com/blog/posts/canvas-image-watermark-implementation-from-positioning-to-tiled-patterns/ Fri, 27 Feb 2026 11:13:45 +0000 https://jsokit.com/blog/posts/canvas-image-watermark-implementation-from-positioning-to-tiled-patterns/ Canvas Image Watermark Implementation: From Positioning to Tiled Patterns Adding watermarks to images is a common requirement—copyright protection, brand visibility, you name it. Recently built an online watermark tool, and here’s how it works under the hood. The Essence of Watermarks It boils down to layering semi-transparent text or graphics over an image. Core code: const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0) // Draw original image first ctx. https://jsokit.com/blog/posts/image-to-sketch-gaussian-blur-and-color-dodge-blending-with-canvas/ Wed, 25 Feb 2026 14:21:49 +0000 https://jsokit.com/blog/posts/image-to-sketch-gaussian-blur-and-color-dodge-blending-with-canvas/ Image to Sketch: Gaussian Blur and Color Dodge Blending with Canvas I was building an image processing toolkit and needed to convert photos into pencil sketch style. After some research, I found the core principle is surprisingly simple: it’s all about combining Gaussian blur with color dodge blending. The Theory Behind Sketch Effect What characterizes a traditional pencil sketch? Clear lines, strong contrast, white background. In digital image processing, edge detection methods like Sobel operator or Canny algorithm are common. https://jsokit.com/blog/posts/canvas-transform-matrix-for-image-rotation-from-translaterotate-to-operation-queues/ Tue, 24 Feb 2026 16:19:16 +0000 https://jsokit.com/blog/posts/canvas-transform-matrix-for-image-rotation-from-translaterotate-to-operation-queues/ Canvas Transform Matrix for Image Rotation: From translate/rotate to Operation Queues Recently I worked on a feature where users upload images and can rotate or flip them, combining multiple operations. For example: rotate 90° clockwise, flip horizontally, then rotate 90° again. Sounds simple, but I hit several gotchas during implementation. The Essence of Canvas Transforms Canvas 2D context provides three transform methods: ctx.translate(x, y) // Translation ctx.rotate(angle) // Rotation (radians) ctx. https://jsokit.com/blog/posts/image-resize-tool-implementation-from-canvas-api-to-high-quality-scaling-algorithms/ Tue, 24 Feb 2026 15:19:16 +0000 https://jsokit.com/blog/posts/image-resize-tool-implementation-from-canvas-api-to-high-quality-scaling-algorithms/ Image Resize Tool Implementation: From Canvas API to High-Quality Scaling Algorithms Written: 2026-05-09 17:22 Image resizing is a deceptively complex task in web development. Whether you’re handling avatar uploads, generating thumbnails, or adapting images for different device displays, the underlying browser rendering mechanics are more nuanced than they appear. Let’s dive into building a high-performance online image resize tool. How Canvas API Works Under the Hood The browser’s image processing backbone is the <canvas> element, which provides a 2D rendering context (CanvasRenderingContext2D). https://jsokit.com/blog/posts/canvas-image-pixelation-the-two-step-scale-down-and-scale-up-approach/ Mon, 23 Feb 2026 19:55:42 +0000 https://jsokit.com/blog/posts/canvas-image-pixelation-the-two-step-scale-down-and-scale-up-approach/ Canvas Image Pixelation: The Two-Step Scale Down and Scale Up Approach Recently, while building an image pixelation tool, I discovered something interesting: many implementations manually iterate through each pixel block to calculate average colors. That works, but there’s a more elegant approach—leveraging Canvas scaling behavior. What is Pixelation? Pixelation is an image processing technique that reduces resolution to hide details. Essentially, you divide an image into blocks and fill each block with a single color. https://jsokit.com/blog/posts/image-optimizer-deep-dive-from-canvas-api-to-intelligent-compression-algorithms/ Mon, 23 Feb 2026 17:55:42 +0000 https://jsokit.com/blog/posts/image-optimizer-deep-dive-from-canvas-api-to-intelligent-compression-algorithms/ Image Optimizer Deep Dive: From Canvas API to Intelligent Compression Algorithms Published: May 8, 2026 03:48 In web development, image optimization is a critical aspect of performance tuning. According to HTTP Archive statistics, images account for more than 50% of the average webpage’s total size. Today, let’s explore how to implement an efficient image optimizer, from the underlying principles of Canvas API to intelligent compression algorithm design. Canvas API: The Browser’s Image Processing Engine Modern browsers provide powerful image processing capabilities through the Canvas API, primarily using the 2D rendering context for pixel-level operations: