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.
This article discusses adaptive scaling methods for canvas-based interactive courseware development, comparing two approaches to maintain aspect ratios while ensuring content visibility across varying screen resolutions and window sizes.
This article details the technical implementation of NetEase Cloud Music’s color‑test H5, covering its single‑page React architecture, preloading optimizations, canvas and WebGL animation techniques, and the deterministic front‑end algorithm that calculates single‑ or dual‑color results from user choices.
This article walks through building a wish‑wall where user wishes appear as floating bubbles forming a dragon shape, using HTML5 canvas to extract pixel data, generating bubble DOM elements with CSS animations, and provides full JavaScript code snippets for the implementation.
This article explores why adding watermarks to web pages is essential for protecting confidential content, compares front‑end and back‑end watermarking approaches, and provides step‑by‑step implementations using DOM overlays, canvas, SVG, image processing, and MutationObserver to keep watermarks resilient against tampering.
This article details the evolution of the Taobao Gold product, the challenges faced during its upgrade to a town-themed experience, and the frontend solutions—including a mixed DOM‑Canvas architecture, layered rendering, animation techniques, performance optimizations, and accessibility implementations for visually impaired users.
This article introduces gamification concepts, explains core 2D interactive techniques such as rendering, animation loops, sprites, nine‑patches and masks, and provides a step‑by‑step tutorial using Eva.js to build a simple moving heart demo with click events.
This article explains how to create end‑to‑end visual regression tests for Canvas‑based tools by capturing reference screenshots with a headless browser, comparing them pixel‑by‑pixel using pixelmatch, and visualizing differences, complete with code examples and best‑practice recommendations.
This article explores the concept of 2.5D graphics, explains why it remains valuable for industrial internet applications, compares CSS+JS, SVG and Canvas implementations, presents code samples and component designs, and details how Alibaba Cloud’s Digital Space project adopted Canvas and Konva to build low‑cost, high‑performance visualizations for industry IoT.
This article explains how to implement a rectangular treemap for outpatient disease data using JavaScript, covering layout algorithms such as Slice‑and‑Dice and Squarified, color filling, and canvas event handling with detailed code examples and performance evaluation metrics.
This article explores image‑related concepts such as CSS pixels, device pixels, device‑independent pixels, DPR and PPI, explains how to calculate image memory usage, compares img tag, background‑image and canvas rendering performance, and offers practical optimization directions for web developers.
This article describes the motivation, product design, core features, and technical implementation details of a simplified Juejin mini‑program built with Taro 3, covering markdown rendering, virtual list handling of large content, and canvas‑based share image generation for a better user experience.
This article demonstrates how to capture a Canvas animation as a video using the Media Streams API and MediaRecorder, providing step‑by‑step code examples, integration with ffmpeg‑wasm for audio, and discusses use cases such as online teaching and resource‑efficient playback.
The article explores how Qixiu’s PC web client evolved gift‑animation formats—from Flash and APNG to a custom IXD and dual‑MP4 with alpha channel—optimizing file size, loading speed, and rendering performance via Canvas and WebGL, ultimately choosing the MP4 solution for quality, efficiency, and designer friendliness.
This talk walks through DingTalk Spreadsheet's journey from zero to a feature‑rich, Excel‑compatible web app, covering its modular architecture, the RangeMan solution for scalable cell management, sophisticated collaboration algorithms like GOT and COT, and performance‑driven rendering techniques using Canvas, double buffering, and a custom text layout engine.
This article provides a comprehensive analysis of AntV's F2 chart library, covering its graphics grammar foundation, modular architecture, implementation details, and mobile adaptation challenges, offering valuable insights for developers working with data visualization.
This article explains how to improve the rendering speed of highly customized stock K-line (candlestick) charts by optimizing canvas drawing commands, using caching strategies, and applying layered rendering to reduce unnecessary state changes and redraws.
The article explains Android audio visualization by decoding PCM data, applying Fourier and Fast Fourier transforms to obtain frequency spectra, comparing the built‑in Visualizer API with a custom JNI‑based implementation, and detailing FFT processing, smoothing, buffering, and Canvas rendering techniques for smooth, performant visual effects.
The article describes how a live‑room video‑gift feature originally built for mobile was ported to a web client by extracting separate color and alpha video streams, compositing them on canvas, then migrating the per‑pixel blending to WebGL shaders, which cut CPU usage dramatically, raise frame rates to about 60 FPS, and outline further optimisations such as pre‑loading, mobile support, and possible MSE or WebAssembly approaches.
This article walks a front‑end beginner through the fundamentals of WebGL, explaining canvas basics, hardware vs software acceleration, and providing a complete Hello World example with HTML, shader code, and JavaScript to render a single red point on a green canvas.
This guide explains how to calculate the exact start and end points of an angled linear gradient that fills text on an HTML canvas, covering the necessary geometry, trigonometric formulas, step‑by‑step derivations, and practical code snippets for accurate rendering.
Learn how to create a simple interactive cat‑themed canvas game for mobile browsers using Go compiled to WebAssembly, covering environment setup with Docker, Go code for DOM manipulation, event handling, rendering, audio, and deployment, while explaining WASM concepts and differences from Service and Web Workers.
This article introduces how to create custom Android Views by overriding onMeasure, onLayout, and onDraw, explains the three-stage view rendering process, and provides detailed examples of Canvas drawing methods—including drawing points, lines, shapes, text, images, and bitmap manipulation—along with code snippets and usage tips.
Over the past ten years, Baidu’s map web engine has transformed from a server‑rendered tile system to a sophisticated WebGL‑based platform, introducing vector rendering, canvas drawing, line thinning, clipping, WebWorkers, WebAssembly, and advanced interaction features to boost performance, flexibility, and 3D capabilities.
This article explains how to apply a full‑screen grayscale effect to Android apps by using a single CSS rule for web pages and custom View subclasses—GrayImageView, GrayTextView, GrayLinearLayout, and GrayFrameLayout—plus an Activity onCreateView override to replace the root content view, complete with code snippets and practical tips.
This article provides a step‑by‑step tutorial on implementing client‑side image compression in JavaScript with the Canvas API, including a complete Vue component, detailed API explanations, handling of file input, canvas drawing, base64 conversion, and cross‑browser download techniques.
This article demonstrates how to achieve a global grayscale (black‑and‑white) effect in Android applications by adding simple CSS‑like styles for web pages and creating custom ImageView, TextView, Button, LinearLayout, FrameLayout subclasses that override draw and dispatchDraw methods, and integrating them via Activity onCreateView to replace the default content view.
The rebuilt 100,000‑seat venue mapping platform replaces Flash with an HTML5 Canvas‑SVG hybrid, splits rendering into tiled canvases, loads only visible stands, uses Bézier curves for arbitrary seat deformation, and implements quadrant‑based printing order, delivering fast, flexible, and scalable seat visualization and editing.
This article explains how Alibaba's ticketing platform redesigned its seat‑drawing system to handle venues with up to 100,000 seats by replacing Flash with a Canvas‑based SVG solution, optimizing data loading, implementing bezier‑curve seat deformation, efficient printing order calculation, and adding advanced editing features.
This article explains how to enable Xcode Canvas previews for legacy Objective‑C views by leveraging SwiftUI's PreviewProvider, detailing the required project settings, bridging‑header configuration, code examples, and troubleshooting steps for integrating preview support into large iOS codebases.
This article details Guangfa Securities' journey of using React Native to render high‑frequency stock charts, comparing WebView and native Canvas solutions, describing the custom Canvas component implementation, performance testing results, and future improvements for mobile charting.
This article explains how Ctrip's marketing team leverages WeChat mini‑program features—poster drawing with canvas, search‑direct navigation, and universal QR‑code routing—to create low‑cost, high‑conversion viral marketing campaigns, complete with code examples and implementation details.
SpriteJS is a Canvas‑oriented rendering library that mimics the DOM API to simplify high‑performance visualizations, offering features such as CSS styling, Flex layout, animation, cross‑platform support, and seamless integration with modern frameworks like React and Vue.
Discover essential solutions for common WeChat Mini Program challenges—including plugin relative paths, generating QR codes, swiper current reset, template message limits, subpackage size rules, retrieving unionId, H5‑MiniProgram navigation, canvas overlay handling, image sharing ratios, authorization flows, and data binding constraints.
This article explains how the Flutter team adapted Flutter's multi‑layer architecture to run on the Web, describing the three prototype approaches, the rendering, layout and painting strategies, CSS Paint API experiments, embedding considerations, portability limits, and the current implementation status.
This article explains how to create smooth, multi‑path paper‑plane flight animations for a mini‑program using CSS3 keyframes, transform versus position, canvas drawing, a reusable Game class, Bezier curve calculations, and inverse‑trigonometric rotation to achieve realistic motion and design flexibility.
This article explains how to create a smooth, multi‑mode paper‑plane animation for a JD mini‑program by comparing position and transform, writing CSS3 keyframes, combining translateX/Y, using canvas with a reusable Game class, defining quadratic and cubic Bézier curves, calculating points with a parametric function, and rotating the plane with atan2 for realistic motion.
This tutorial walks you through creating a configurable lottery wheel using Canvas in a WeChat Mini Program, covering the overall concept, required WXML layout, animation setup, interactive button handling, and how to display prize rules, with a complete code example.
This guide walks through using the qrcodejs library to create QR codes, styling them with logos and borders, converting the DOM to a canvas via html2canvas, handling cross‑origin and clarity issues, and finally exporting the result as a shareable image.
SpriteJS, an open‑source cross‑terminal Canvas library from 360 Qiwuchuan, simplifies animation creation by wrapping Canvas APIs in a DOM‑like model, offering event handling, Web Animation support, caching strategies, and integration with multiple graphics and physics engines for data visualization and lightweight games.
This guide walks through creating seven customized poster images—each featuring a user’s name and tags—by using HTML5 canvas, loading background graphics, measuring and centering text, handling cross‑origin images, and exporting the result as a data URL.
This article introduces SpriteJS, a cross‑platform canvas library from 360 Qiwang Team, showing how to create structured UI, draw shapes, apply transitions, use the Web Animation API, work with textures, paths, groups, events, D3 integration, physics engines and particle systems, all with practical JavaScript code examples.
SpriteJS is an open‑source, cross‑platform JavaScript library that simplifies canvas drawing by providing a DOM‑like API for creating sprites, paths, groups, and animations, integrating seamlessly with tools such as D3, Matter‑JS, Proton, and CurveJS for rich interactive visualizations.
SpriteJS is an open‑source, cross‑terminal canvas library from 360 Qiyou that provides a DOM‑like API for drawing shapes, creating sprites, animating with transitions or the Web Animation API, handling textures, vectors, groups, events, and integrating with D3, physics engines and particle systems.
This article introduces WebGL as a JavaScript‑OpenGL ES 2.0 hybrid for hardware‑accelerated 3D rendering, explains how to create a WebGL context, write and compile vertex and fragment shaders, handle canvas sizing, and render both square and circular points with detailed code examples.
This article explains how to perform essential front‑end image processing with the HTML5 canvas—handling cross‑origin loading, ensuring images are fully loaded, then scaling, cropping, and rotating them while preserving aspect ratio and exporting the results as base64 strings, laying groundwork for later composition techniques.
This article explains how to implement client‑side image compression in mobile browsers by converting selected files to DataURL, resizing them with a Canvas element, adjusting compression rates based on file size, and finally uploading the compressed Blob to a server via AJAX.
This article explains how to implement a one‑stroke puzzle game using graph theory, describes the two‑step rendering process, provides JavaScript pseudocode for touch interaction, and details an automatic image‑recognition tool that extracts level data from hand‑drawn diagrams while optimizing performance.
This article explains how to force landscape mode for lightweight HTML5 mobile games, adapt DOM layouts by switching viewport units, choose appropriate canvas scaling strategies, and apply relocation and redraw techniques to ensure UI elements remain functional across diverse screen sizes and orientations.
HTML5, once a long‑awaited web standard born in 2004 and finalized in 2014, replaced Flash by introducing native multimedia, canvas, WebSockets, and hardware acceleration, while facing prolonged drafting delays and compatibility challenges, ultimately reshaping modern web development and paving the way for richer, plugin‑free experiences.
This article explains how to efficiently place many circles on an HTML5 canvas by using random point generation, circle‑based collision detection, attempt limits, and an alternative breadth‑first search method, providing complete JavaScript code for fixed and random radii and comparing performance on different canvas sizes.
This article explains how to detect the EXIF Orientation tag on mobile‑captured photos, rotate them correctly with canvas, and compress the result to reduce size, providing a lightweight solution for fixing 90° rotation issues on iPhone and certain Android devices.
This article dissects a 1 KB js1k competition entry that builds a 3‑D forest‑fire game using only built‑in canvas variables, explaining the competition rules, the demo’s gameplay, the compact object‑creation logic, the clever key‑state handling, and the full event‑loop rendering pipeline.
This article walks through building a reusable canvas‑based drop component that renders realistic rain and snow animations, explains the underlying JavaScript architecture, and provides complete source code with usage examples and future enhancement ideas.
This article walks through the development of the HandQ Weather H5 page, covering REM‑based responsive layout, Flexbox sectioning, HTML5 canvas charts and animations, CSS3 transitions, and a suite of performance and compatibility optimizations for mobile browsers.
This tutorial walks you through creating a lightweight Canvas particle engine—including world, launcher, and grain components, physics forces, rendering loop, and core JavaScript modules—so you can experiment with interactive particle effects in web projects.
This article explores how Baidu Map’s open platform leverages web‑based visualization libraries such as ECharts, MapV, Canvas, SVG and WebGL to render point, line and polygon geospatial data—including heatmaps, clustering, and 3D charts—while addressing performance challenges of large‑scale datasets and outlining the front‑end technologies used.
This article explains how to create a smooth train animation on a web page by sampling track points, using linear interpolation for position and angle, and dynamically adjusting speed, with JavaScript code examples illustrating the implementation.
