The article explores Konva.js—a popular 2D Canvas library—its new official MCP server that feeds the full documentation to LLMs, enabling AI agents like Cursor and Claude Desktop to generate accurate interactive Canvas code, and compares Konva with other canvas solutions.
HTML‑in‑Canvas is an experimental Web API that captures HTML elements as images and draws them onto a canvas, giving developers pixel‑level control to create game‑like UI effects, dynamic layouts, and even embed live web content inside classic games like Doom, while the proposal advances through W3C.
Pretext is a TypeScript‑based text layout engine that accurately computes line breaks and element heights using canvas.measureText and Intl.Segmenter, eliminating costly DOM measurements, reflows, and layout thrashing while delivering sub‑0.05 ms performance for dynamic UI scenarios.
Claude Code can read your project’s code, git history, and structure, then automatically create or update Obsidian notes, generate dev logs, and even produce architecture Canvas files with a single /obsidian command, offering a local‑first, plugin‑free workflow for AI‑driven knowledge management.
This guide details how to implement a full‑stack H5 PAG player for the “Use Basketball to Know Me” activity, covering SDK loading, canvas‑based image manipulation (drag, scale, rotate), dynamic layer and text replacement, real‑time preview synchronization, snapshot export, batch synthesis, performance tuning, and fallback strategies.
This article details the design and implementation of a visual canvas‑based marketing configuration system that replaces Apollo, introduces a custom Reactor‑powered workflow engine, outlines component ecosystems, solves concurrency challenges, and demonstrates significant efficiency, scalability, and reliability gains after deployment.
This tutorial shows how to initialize a Fabric.js canvas, replace the default rotation handle with a custom SVG icon, create a rotating cursor using data‑URL SVGs, and optimize performance by updating the cursor only at 15‑degree intervals.
To enable fluid dragging and zooming of a Fabric.js seat‑layout canvas on mobile, the author replaces costly canvas viewport transforms with CSS transform translate/scale, adds mouse and touch handlers, debounces scaling, disables object caching, caps offsets, and throttles events, achieving smooth performance across browsers.
This article explains how to add undo and redo functionality to a Fabric.js canvas editor by maintaining a history stack, provides full source code, discusses performance considerations, and compares alternative approaches such as the Command Pattern and object‑level diff snapshots.
This article walks through setting up Fabric.js on a web page, creating a canvas, drawing rectangles, adding zoom and pan controls, implementing object snapping and alignment guides, and provides complete source code so readers can quickly build an interactive canvas application.
This article explains two Android Canvas spray‑effect techniques—one using Gaussian blur and another using fog‑image masks—detailing their challenges, implementation steps, full source code, performance trade‑offs, and tips for fixing density issues.
An in‑depth exploration reveals how setting the crossOrigin attribute on images prevents strong HTTP caching in Canvas operations, detailing the browser's cache‑key composition, the security implications of Canvas tainting, and practical strategies to standardize requests, configure CORS, and optimize performance.
This article explores various techniques—from CSS animation to WebGL shaders—for rendering rain in a browser, analyzes the underlying algorithms, provides GLSL and Three.js code examples, and discusses performance optimizations and extensions such as snow effects.
Discover how to create a powerful, all‑in‑one Canvas toolkit that includes high‑performance edge detection, Web‑Worker‑accelerated video frame capture, particle‑based fade‑out effects, and a feature‑rich online drawing board, complete with undo/redo, layer management, and GPU‑smooth zoom and drag.
This tutorial explains how to implement a firework‑style like animation in Android by defining particle objects, drawing them on a Canvas, controlling their motion with ValueAnimator and various interpolators, and assembling the animation sequence to produce a festive, high‑frame‑rate visual effect.
This article compares two frontend techniques—CSS3 transform and Canvas Transform—for scaling, rotating, moving, and cropping user‑selected images, explaining their implementation steps, code examples, advantages, limitations, and how to export the final result.
This tutorial explains how to capture any Android view—whether displayed, off‑screen, or generated programmatically—into a Bitmap, draw it with Canvas, and then save or share the resulting image, covering multiple view types and Android version compatibility.
This article introduces AutoHue.js, a lightweight JavaScript library that uses Canvas, Lab color space conversion, and clustering algorithms to automatically extract dominant, secondary, and edge colors from images for seamless background integration in web banners, complete with usage examples and installation instructions.
This article explains how to build a Gantt chart using Konva, detailing the layer structure, rendering logic, scrolling handling, performance optimizations, and provides TypeScript code examples for configuration, drawing, and event management.
This article explains the fundamentals of WebAssembly, its advantages, how to install Rust, set up a Rust project, compile it to a .wasm module with wasm‑bindgen, and seamlessly integrate the resulting WebAssembly code into a Vue 3 frontend application using canvas drawing examples.
This article explains how to build a reusable Vue 3 component that draws customizable ring charts on a canvas, using TypeScript, props for size, stroke width, and a ratio list to render multiple colored arcs dynamically.
This article walks through the evolution of watermark techniques, demonstrates how to harden a front‑end watermark against deletion, invisibility, and covering using MutationObserver and canvas, introduces a low‑visibility dark watermark with decode logic, and details OCR integration and optimization to improve recognition accuracy in screenshot‑search scenarios.
This article explains how to build a canvas‑based calendar widget using Konva, covering the design of date cells, task‑range rendering, drag‑and‑drop interaction, event handling, and the public API, and provides the full source code for reference.
ChatGPT 4.0 with Canvas introduces a visual "canvas" that blends language and graphics, enabling multimodal dialogue, real‑time visual feedback, and collaborative workflows across education, design, and business, while posing technical challenges in vision‑language integration, context consistency, and performance optimization.
This article explains various techniques for generating custom posters—including canvas, Fabric.js, html2canvas, and dom‑to‑image—covers client‑side, server‑side, and mobile approaches, compares their performance and compatibility, and provides solutions to common issues such as cross‑origin restrictions, white‑screen bugs, and image‑ratio problems.
The article details progressive front‑end watermark schemes—from a basic canvas overlay to mutation‑observer‑protected, hide‑ and cover‑resistant, and low‑opacity dark watermarks—and explains how adaptive tone handling, contrast tuning, region cropping, and a hybrid OCR pipeline (internal service with tesseract.js fallback) ensure robust, invisible data protection and accurate screenshot analysis.
The article walks through creating a firework‑style animation for Android like buttons by building a custom ParticleDrawingView that renders launch particles and exploding spark groups on a Canvas, using ValueAnimator with configurable durations and interpolators to control four animation phases and particle properties such as position, velocity, alpha, and rotation.
This article explains how to design and implement a canvas‑based editor for customizable store promotional materials, covering requirement analysis, system architecture, canvas library selection, component initialization, event handling, drag‑and‑drop, form integration, and future enhancements.
This tutorial walks through creating a scalable, infinite‑size collaborative whiteboard that synchronizes drawing actions across multiple browsers in real time using WebSocket, Canvas, and the Webman PHP framework, covering server setup, front‑end integration, and full code examples.
This guide explains how to generate shareable poster images entirely on the front end for H5 pages and mini‑programs, compares client‑side, front‑end, and server‑side approaches, reviews libraries such as html2canvas, dom‑to‑image, wxml‑to‑canvas and Painter, and offers solutions for design fidelity, CORS, and performance issues.
This tutorial explains how to use the html2canvas library to render dynamic HTML content into canvas images, covering installation, markup definition, styling, script implementation, download handling, and important limitations for creating shareable posters in front‑end applications.
This article walks through the mathematical analysis, coordinate calculations, and step‑by‑step Android code needed to draw an inverted equilateral triangle, animate a red/black tracing line, and rotate the shape with rounded corners, while addressing common pitfalls such as frame drops and aliasing.
This tutorial walks you through creating a full‑featured image annotation tool using HTML5 Canvas, covering image rendering, mouse‑wheel zoom, viewport panning, rectangle drawing, selection, drag‑move, size adjustment, and rotation with detailed JavaScript code examples.
This article explains the role of maps in games and provides a step‑by‑step guide to creating a top‑down, real‑time minimap that follows the player, covering preparation, objectives, technical solutions, canvas rendering, ray‑casting calculations, and implementation details for both orthographic and oblique perspectives.
This roundup curates the latest frontend resources—including web performance snippets, Deno’s new JSR registry, Vercel’s AI SDK, VSCode source navigation tricks, architecture design lessons, a Canvas rendering engine guide, React nested component pitfalls, Bilibili analytics platform case study, and product design simplification tips—providing practical knowledge for developers and product teams.
This tutorial explains how to access a webcam with JavaScript, display the live video in a web page, capture a frame onto a canvas, overlay custom text as a watermark, and export the result as a data URL for further processing.
Learn step‑by‑step how to create a signature board for DingTalk mini‑programs using Taro and React, covering canvas creation, drawing logic, size adjustments, image export, undo functionality, landscape mode handling, and common pitfalls, so you can add reliable boss‑signed reports to your app.
This article presents Pictode, a Konva.js‑driven graphics editor framework, explains its core features, demonstrates how to set up a canvas, use drawing tools, selector and history plugins, and provides step‑by‑step code examples for integration with Vue or other front‑end projects.
This roundup highlights the latest frontend tools and deep‑dive articles, covering StyleX, Astro 4.0, Vitest 1.0, VS Code 1.85, lock mechanisms for single‑threaded concurrency, bizarre JavaScript behaviors, target="_blank" security flaws, plugin system designs, designer‑developer workflows, and canvas collision detection techniques.
This article demonstrates how to create a multi‑window, real‑time interactive animation using pure JavaScript by drawing circles on a canvas, sharing each window's screen coordinates and colors through localStorage, and connecting them with lines across browsers.
This article explains how to protect confidential business documents by implementing page‑level watermarks using canvas and pseudo‑elements, and how to add robust watermarks to images via OSS parameters or client‑side canvas processing, while preventing removal through MutationObserver.
This article explores how to capture and process screenshots of web pages directly in the browser, discussing canvas drawImage basics, pixel extraction, the trade‑offs of using html2canvas versus dom‑to‑image, performance and bundle size considerations, and alternative plugin‑based approaches.
This article explores the challenges and solutions for implementing a web‑page screenshot feature, comparing canvas drawImage, html2canvas, dom‑to‑image, and Chrome extension approaches, while discussing performance, bundle size, and practical code examples for extracting and processing pixel data.
This article walks through debugging html2canvas by examining its rendering pipeline, comparing foreignObject and pure canvas methods, analyzing stacking contexts, and presenting practical fixes for export bugs, including configuration tweaks and DOM manipulation techniques.
This article describes the design and implementation of a Mid‑Autumn Festival themed HTML5 canvas game, detailing the gameplay requirements, JavaScript code for the ship, food objects, image management, and the Nginx configuration needed to deploy the game online.
This tutorial walks through creating a lightweight, canvas‑driven rich‑text editor that mimics Word’s layout and editing features, covering data structures, page rendering, text measurement, line calculation, cursor handling, keyboard input, deletion, line breaks, and selection using plain JavaScript and HTML5 canvas.
This article surveys recent front‑end advancements, covering stunning CSS 3D image effects, design‑system construction, the high‑performance leaferjs canvas engine, Chrome 115’s new capabilities, TypeScript’s typechat project, npm ecosystem insights, DDD practices in information services, and an overview of a leading front‑end team.
This article examines the architecture, rendering pipeline, update mechanism, and event‑picking strategy of the LeaferJS canvas library, illustrating how its lightweight node creation, selective full‑ and partial‑rendering, and optimized hit‑testing achieve high performance compared with alternatives like Konva.
Sweep‑light loading effects, such as skeleton‑screen and logo sweeps, improve perceived performance by overlaying a moving translucent gradient mask, and can be implemented on iOS using Core Animation layers and timers, while Android uses shape drawables, ObjectAnimator or Canvas PorterDuff blending, with theme and performance considerations.
This article explains the four primary browser rendering approaches—DOM (HTML+CSS), SVG, Canvas, and WebGL/WebGPU—detailing their principles, advantages, limitations, and practical examples to help developers understand the underlying mechanics of web‑based visualizations.
This article explores the challenges AI poses to designers, examines why low‑code platforms struggle with user experience, analyzes real‑world canvas issues through competitor studies, and presents a comprehensive redesign of the 58APAAS canvas that improves framework, visual feedback, interaction, semantics, and UI guidelines while hinting at future AI‑driven enhancements.
This article provides a comprehensive introduction to WebGL, covering its relationship with OpenGL ES, differences from Canvas and SVG, performance comparisons, step‑by‑step code examples for drawing points, squares and shaders, and explains the complete rendering pipeline for front‑end developers.
This article walks through the step‑by‑step implementation of alignment functions—left, center, right, top, middle, and bottom—in a graphics editor by computing AABB boxes, deriving a mixed bounding box, and applying concise JavaScript loops to adjust element positions.
This article details the user‑driven requirements, problem analysis, design choices, and technical implementation of a high‑performance, scalable data lineage visualization built with a React‑Canvas hybrid architecture to support tens of thousands of tables in a big‑data environment.
This article explains how a low‑code editor can provide true WYSIWYG editing by separating the canvas into an editing layer and a rendering layer, using an iframe for isolation, synchronizing layout information via DOM measurements, and addressing the challenges of component overlap, performance, and cross‑technology integration.
This article examines how WebAssembly can accelerate canvas and WebGL animation engines by redesigning data structures, separating JS and WASM animation objects, optimizing the update cycle, handling mixed animations, and presenting benchmark results for thousands of animated nodes.
This guide explains how to use the open‑source Skia 2D graphics library via the canvaskit‑wasm WebAssembly package to create surfaces, draw shapes, apply paints, shaders, blend modes, and perform 2D matrix transformations—including translation, scaling, rotation, skew, and perspective—culminating in a complete procedural design workflow with reusable JSX components.
This tutorial walks you through building a full‑screen fireworks effect in the browser by structuring the HTML, styling the text and canvas with CSS, and implementing the animation logic using JavaScript's Canvas API, utility functions, and object‑oriented firework and spark classes.
This tutorial walks through creating a semi‑circular progress bar using both Canvas and SVG, covering preparation, drawing techniques, angle calculations, animation loops, anti‑aliasing optimizations, and dynamic updates, and compares the visual and performance differences between the two approaches.
Facing memory leaks and high CPU load in a Canvas‑based avatar editor, the team switched to WebGL, leveraging GPU parallelism, off‑screen framebuffers, and blending techniques to dramatically reduce memory consumption and CPU usage while adding features like image layering and color blending.
The article presents an overview of JD's Waterdrop low-code platform, detailing the canvas concept, types, research on existing solutions, development goals, design architecture, adaptive layout algorithms, common layout patterns, and future plans for enhancing the front‑end building experience.
This article introduces HTML5 Canvas, explains its advantages over SVG, and provides comprehensive guidance on using the Canvas API—including context acquisition, drawing shapes, paths, arcs, gradients, pixel manipulation, state management, transformations, and a complete clock example—illustrated with code snippets and visual demos.
The article presents a full‑featured H5 image viewer built on the native canvas API that supports touch gestures such as swipe, drag, pinch‑zoom and double‑tap, handles slide switching, boundary control, initial centering, mouse‑wheel emulation, and high‑resolution rendering via devicePixelRatio, eliminating the need for native bridges.
This article guides developers through creating a customizable slider captcha component using Vue 3 and Vite, covering component design principles, Canvas drawing techniques, event handling, API configuration, and publishing the component to npm, with complete code examples.
This article explores the rise of no‑code/low‑code builder platforms, detailing their core concepts, architecture, UIDL specifications, sandboxing, drag‑and‑drop mechanics, smart snapping, component insertion, and event handling, offering practical insights for frontend engineers building modern visual editors.
This article explains how to implement a one‑click precise screenshot feature in a web application by leveraging the Clipboard API, converting DOM elements to images via SVG foreignObject, handling styles and resources, and finally writing the image to the system clipboard.
This article explains how to build various particle effects in Three.js using THREE.Sprite, THREE.Points, dat.GUI, Canvas textures, and custom shaders, and combines them into an interactive 3D scene featuring a wandering astronaut, fog effects, and real‑time parameter controls.
This article explains various web watermark methods—including simple visible logos, full‑page overlays, dynamic canvas‑generated marks, SVG‑based text watermarks, and robust invisible (blind) watermarks—while covering implementation details, security considerations, and protection mechanisms such as Shadow DOM and MutationObserver.
This article demonstrates how to create dynamic liquid‑flow animations for static images using SVG filters (feTurbulence, feDisplacementMap), CSS mask‑image, Canvas drawing, and TweenMax, providing step‑by‑step code for generating hotspots, animating them, and integrating image upload and canvas clearing in a web page.
This article explains how to implement an in‑platform image masking solution using a small JavaScript mosaic library, covering the background problem, design choices, core canvas algorithms, key code snippets, dynamic brush size handling, and practical integration steps.
This article explains how to load custom fonts, handle text shaping, measure and wrap text accurately in HTML5 canvas, and overcome issues like Arabic glyph variations and letter‑spacing by using ctx.measureText, whole‑string measurement, performance‑aware algorithms, and the HarfBuzz shaping engine.
This tutorial explains how to implement a one‑stroke gesture recognizer with HTML5 canvas, covering drawing, resampling, translation, rotation, scaling, feature extraction, and similarity measurement using Euclidean and cosine distances, complete with full TypeScript code examples.
This article details how Ant Financial’s front‑end team created a fast, extensible React big‑data table component using the open‑source AntV S2 Canvas library, covering performance‑driven technical choices, custom cell editing, virtual scrolling, freezing, filtering, sorting, and integration challenges that replaced costly commercial spreadsheet solutions.
Web animation enhances user experience by providing visual feedback and dynamic content, and this article surveys common frontend animation methods—including CSS frame and tween animations, JavaScript style manipulation, SVG animations, and Canvas/WebGL techniques—detailing their implementations, use cases, and performance considerations.
This article introduces the fundamentals of 2D drawing on the web using SVG, Canvas, and WebGL, compares their strengths, demonstrates code examples for shapes and paths, explains event handling and picking methods, and provides practical performance optimization strategies for rendering and interaction.
This article compares the front‑end screenshot libraries dom‑to‑image and html2canvas, explains their APIs and underlying SVG‑or‑canvas rendering pipelines, walks through typical usage code, highlights common pitfalls such as cross‑origin images and scrolling, and offers practical configuration and debugging tips for developers.
This curated newsletter highlights 2022 frontend trends, monetizing technical blogs on Medium, new Chrome @layers rules, upcoming ECMAScript 2022 features, a custom canvas layout engine, a Three.js‑React 3D Winter Olympics page, JavaScript AST tooling, SCSS one‑click theming, and a fractal snowflake canvas demo.
This guide introduces Fabric.js—a library that adds an object model, SVG parsing, and interactivity to HTML5 Canvas—and walks through setting up a Vue project, installing the library, creating a canvas element, and drawing a red rectangle with concise code examples.
This article presents a lightweight, framework-agnostic canvas layout engine that parses CSS-like styles, performs document-flow layout, renders via a depth-first canvas draw, supports interactive events, works across web and mini-program environments, and demonstrates its API, debugging tools, performance results, and future extensions.
This tutorial walks through creating a dynamic, multi‑stage like animation for H5 live streams using CSS keyframe animations and a Canvas‑based implementation, covering trajectory analysis, sprite handling, SCSS loops, performance comparison, and practical code snippets for seamless integration.
This article introduces the ZRender canvas rendering engine, explains its underlying Canvas2D API, demonstrates how to integrate ZRender into projects, and provides detailed code examples for creating shapes, handling events, adding animations, and extending the library with custom elements such as video support.
This article details the complete design and implementation process of a mobile signature component using HTML5 Canvas, covering requirements, architecture, event handling for touch and mouse, landscape mode handling, drawing optimization, and file export techniques for both base64 and File formats.
This guide shows how to generate smooth, high‑quality curves from a polyline in pure JavaScript by computing quadratic and cubic Bézier points, deriving control points via angle‑bisector geometry, assembling the segments, and rendering and animating the result on an HTML5 canvas without external libraries.
Canvas performance hinges on the number and size of drawn shapes, so optimizing by reducing draw‑calls, using layered or clipped rendering, and offloading heavy drawing to OffscreenCanvas or Web Workers can preserve frame rates and keep the UI responsive.
This article introduces five fun Christmas-themed mini games—including a jQuery lottery page, a cliff‑crossing Santa game, a canvas gift‑catching game, an HTML5 red‑packet game, and a mobile jQuery red‑packet game—each with a brief description and downloadable source code links.
Optimizing HTML5 canvas performance involves reducing draw calls, using layered and clipped rendering, performing quick bounding‑box checks, and offloading heavy drawing to OffscreenCanvas with Web Workers, enabling smooth animation even when thousands of shapes are rendered.
This article explains the fundamentals of web animation, compares animation techniques such as CSS, SVG, and Canvas, demonstrates how to create frame‑based Canvas animations with JavaScript and Konva, shows how to integrate them into React (including react‑konva), and provides performance‑optimisation strategies for smoother rendering.
The team replaced Baidu Wenku’s HTML‑CSS reader with a Canvas‑based architecture (CReader) that separates logic, data, parsing, rendering and application layers, enabling direct long‑image export, fast text selection, anti‑copy protection, annotation support, and cross‑platform deployment on PC, WAP and mini‑programs.
Konva.js detects whether a point lies inside a shape by assigning each shape a unique random color key, rendering a hidden hitCanvas with these colors, and then reading the pixel color at the click position to identify the corresponding shape, supporting up to 16.7 million objects.
This article walks through creating a fully customizable, high‑performance HTML5 canvas drawing board for online teaching, covering devicePixelRatio handling, responsive layout, touch and mouse event processing, drawing pipelines, multi‑touch support, erasing modes, caching strategies, undo/redo, and brush extensions, all with complete React code examples.
Learn how to capture click events on an HTML5 Canvas, compute the click coordinates, and determine whether the point lies inside a polygon using both the Crossing Number (even‑odd) method and the more robust Winding Number algorithm, complete with JavaScript code examples.
The article explains html2canvas’s workflow—cloning, parsing, and rendering based on stacking contexts—and diagnoses why transparent overlays appear opaque in screenshots, revealing that the npm package lacks opacity handling; it then proposes adding an OpacityEffect class that records and applies element opacity via canvas globalAlpha to fix the issue.
This article explains how to use D3's treemap layouts—including binary, dice, slice, slice‑dice, squarify, and resquarify—to create a dynamic, stable grid animation for a voting H5 activity, covering algorithm stability, data offset handling, and visual transition techniques.
This article explains how to create a reusable React hook that uses two canvas layers to let users select a region on an image, shows a gray‑out overlay with a border during selection, and returns the cropped area as a base64 PNG, including full implementation details and future enhancements.
This article presents a comprehensive technical summary of various H5 animation solutions—including pure CSS, dynamics.js, random motion, frame animation, lottie, video and APNG/WebP—along with mobile adaptation strategies using flexbox and practical video preloading methods for improved performance and user experience.
This article details the design and implementation of a cross‑platform cover image editor for short videos, covering competitor analysis, 9‑patch image handling, positioning protocols, canvas‑based rendering steps, and future performance and feature enhancements.
This article examines how Taobao's front‑end team built a custom video frame‑capture tool, compares video+canvas with FFmpeg‑WebAssembly approaches, presents testing results, implementation details, and future optimizations to improve thumbnail selection efficiency and user experience.
This article details the challenges encountered when developing WeChat H5 pages—such as authorization‑loop redirects, cross‑origin poster creation with html2canvas, iPhone 100vh scrolling bugs, and precise performance timing using window.performance—and presents practical code‑based solutions and compatibility tips for both iOS and Android devices.
This article details a Flutter‑based solution for automatically tracing Chinese characters, covering data preprocessing, SVG‑to‑coordinate conversion, scaling, Y‑axis inversion, translation, centering correction, and smooth stroke animation with frame‑rate optimization.
This article walks through the fundamentals of computer graphics, explaining rasterization, geometry, and ray tracing, then shows how to implement a basic path‑tracing renderer in TypeScript using vectors, rays, spheres, a camera, and Web Workers to render on a canvas.
