BestHub
Sign in
Tagged articles

Canvas

159 articles · Page 2 of 2
ByteDance Dali Intelligent Technology Team
ByteDance Dali Intelligent Technology Team
Jul 1, 2021 · Mobile Development

Implementing Chinese Character Auto‑Trace (描红) in Flutter: Data Handling, SVG Conversion, Coordinate Transformation, and Animation

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.

CanvasChinese charactersCoordinate Transformation
0 likes · 15 min read
Implementing Chinese Character Auto‑Trace (描红) in Flutter: Data Handling, SVG Conversion, Coordinate Transformation, and Animation
ELab Team
ELab Team
Jun 24, 2021 · Game Development

Build a Simple Path Tracer in TypeScript: From Geometry to Ray Tracing

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.

CanvasPath Tracingcomputer graphics
0 likes · 35 min read
Build a Simple Path Tracer in TypeScript: From Geometry to Ray Tracing
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 31, 2021 · Frontend Development

How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic

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.

CanvasMatter.jsReAct
0 likes · 10 min read
How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic
ByteFE
ByteFE
May 26, 2021 · Frontend Development

Creating a Dragon‑Shaped Wish Wall with Canvas and Bubble Animations

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.

CanvasDragonbubble
0 likes · 5 min read
Creating a Dragon‑Shaped Wish Wall with Canvas and Bubble Animations
ELab Team
ELab Team
May 20, 2021 · Frontend Development

Robust Browser Watermarks: DOM Overlays, Canvas, SVG & Hidden Image Techniques

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.

CanvasMutationObserverimage processing
0 likes · 20 min read
Robust Browser Watermarks: DOM Overlays, Canvas, SVG & Hidden Image Techniques
Taobao Frontend Technology
Taobao Frontend Technology
Apr 28, 2021 · Frontend Development

How Alibaba’s Taobao Gold Upgrade Revolutionized Frontend Game Development

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.

CanvasGame Developmentaccessibility
0 likes · 19 min read
How Alibaba’s Taobao Gold Upgrade Revolutionized Frontend Game Development
Taobao Frontend Technology
Taobao Frontend Technology
Apr 8, 2021 · Frontend Development

How to Build Reliable Canvas E2E Tests with Puppeteer and Pixelmatch

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.

CanvasE2E testingPuppeteer
0 likes · 12 min read
How to Build Reliable Canvas E2E Tests with Puppeteer and Pixelmatch
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 8, 2021 · Frontend Development

How 2.5D Graphics Are Revolutionizing Front‑End Development for Industrial IoT

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.

2.5DCanvasFrontend
0 likes · 23 min read
How 2.5D Graphics Are Revolutionizing Front‑End Development for Industrial IoT
ELab Team
ELab Team
Mar 24, 2021 · Frontend Development

Why Your Images Eat Memory: Understanding Pixels, DPR, and Performance

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.

CanvasFrontend PerformanceMemory usage
0 likes · 17 min read
Why Your Images Eat Memory: Understanding Pixels, DPR, and Performance
ByteFE
ByteFE
Feb 3, 2021 · Frontend Development

Developing a Simplified Juejin Mini Program with Taro 3: Design, Features, and Technical Challenges

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.

CanvasMarkdown RenderingMini Program
0 likes · 9 min read
Developing a Simplified Juejin Mini Program with Taro 3: Design, Features, and Technical Challenges
ByteFE
ByteFE
Jan 12, 2021 · Frontend Development

Recording Canvas Animations to Video Using the Media Streams API

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.

CanvasFrontendMedia Streams API
0 likes · 6 min read
Recording Canvas Animations to Video Using the Media Streams API
iQIYI Technical Product Team
iQIYI Technical Product Team
Dec 25, 2020 · Frontend Development

Optimizing Live Streaming Gift Animations: Formats, Performance, and Implementation on Qixiu PC Web

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.

APNGAnimation FormatsCanvas
0 likes · 12 min read
Optimizing Live Streaming Gift Animations: Formats, Performance, and Implementation on Qixiu PC Web
Alibaba Terminal Technology
Alibaba Terminal Technology
Dec 25, 2020 · Frontend Development

How DingTalk Built a High‑Performance, Collaborative Online Spreadsheet from Scratch

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.

CanvasFrontendOT
0 likes · 14 min read
How DingTalk Built a High‑Performance, Collaborative Online Spreadsheet from Scratch
ByteFE
ByteFE
Dec 23, 2020 · Frontend Development

F2 Source Code Analysis: Chart Library Architecture and Mobile Adaptation

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.

AntVCanvasChart Library
0 likes · 39 min read
F2 Source Code Analysis: Chart Library Architecture and Mobile Adaptation
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Sep 17, 2020 · Mobile Development

Android Audio Visualization: From Fourier Transform to Custom Visualizer Implementation

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.

AndroidAudio VisualizationBufferQueue
0 likes · 11 min read
Android Audio Visualization: From Fourier Transform to Custom Visualizer Implementation
Tencent Music Tech Team
Tencent Music Tech Team
Aug 14, 2020 · Frontend Development

Web Implementation of Transparent Video Gift Animations Using Canvas and WebGL

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.

CanvasWebGLalpha-blending
0 likes · 9 min read
Web Implementation of Transparent Video Gift Animations Using Canvas and WebGL
Aotu Lab
Aotu Lab
Jul 7, 2020 · Frontend Development

How to Compute Precise Angled Linear Gradient Coordinates for Canvas Text

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.

CSSCanvasgradient-calculation
0 likes · 4 min read
How to Compute Precise Angled Linear Gradient Coordinates for Canvas Text
ITPUB
ITPUB
Jul 2, 2020 · Frontend Development

Build a Cat Canvas Game with Go and WebAssembly: Step‑by‑Step Guide

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.

CanvasDockerGame Development
0 likes · 15 min read
Build a Cat Canvas Game with Go and WebAssembly: Step‑by‑Step Guide
Sohu Tech Products
Sohu Tech Products
Jul 1, 2020 · Mobile Development

Android Custom View Implementation and Canvas Drawing Tutorial

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.

CanvasCustom ViewGraphics
0 likes · 31 min read
Android Custom View Implementation and Canvas Drawing Tutorial
Baidu Maps Tech Team
Baidu Maps Tech Team
May 29, 2020 · Frontend Development

How Baidu’s Web Map Engine Evolved Over a Decade: From Tiles to WebGL

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.

Baidu MapsCanvasWebGL
0 likes · 10 min read
How Baidu’s Web Map Engine Evolved Over a Decade: From Tiles to WebGL
AI Code to Success
AI Code to Success
May 13, 2020 · Mobile Development

Turn Any Android App Grayscale with a Few Custom Views

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.

AndroidAppCompatCanvas
0 likes · 15 min read
Turn Any Android App Grayscale with a Few Custom Views
政采云技术
政采云技术
Apr 26, 2020 · Frontend Development

JavaScript Image Compression Using Canvas and Vue

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.

Canvasimage compression
0 likes · 10 min read
JavaScript Image Compression Using Canvas and Vue
Sohu Tech Products
Sohu Tech Products
Apr 8, 2020 · Mobile Development

How to Apply a Global Grayscale Theme to Android Apps Using Custom Views

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.

CanvasCustomViewUI
0 likes · 13 min read
How to Apply a Global Grayscale Theme to Android Apps Using Custom Views
Youku Technology
Youku Technology
Feb 25, 2020 · Frontend Development

Design and Optimization of a 100,000‑Seat Venue Seat‑Mapping System: From Flash to Canvas

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.

CanvasSVGfrontend engineering
0 likes · 11 min read
Design and Optimization of a 100,000‑Seat Venue Seat‑Mapping System: From Flash to Canvas
Alibaba Cloud Developer
Alibaba Cloud Developer
Feb 3, 2020 · Frontend Development

How Alibaba Scaled Seat Mapping for 100,000‑Seat Venues Using Canvas & SVG

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.

CanvasFrontendlarge venues
0 likes · 12 min read
How Alibaba Scaled Seat Mapping for 100,000‑Seat Venues Using Canvas & SVG
Sohu Tech Products
Sohu Tech Products
Jan 15, 2020 · Mobile Development

Using Xcode Canvas to Preview Objective‑C UI with SwiftUI Previews

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.

CanvasObjective‑CSwiftUI
0 likes · 17 min read
Using Xcode Canvas to Preview Objective‑C UI with SwiftUI Previews
Ctrip Technology
Ctrip Technology
Mar 21, 2019 · Frontend Development

Marketing Strategies for WeChat Mini Programs: Poster Generation, Search Direct, and Multi‑Platform QR Codes

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.

CanvasFrontendQR code
0 likes · 9 min read
Marketing Strategies for WeChat Mini Programs: Poster Generation, Search Direct, and Multi‑Platform QR Codes
Weimob Technology Center
Weimob Technology Center
Dec 28, 2018 · Mobile Development

12 Must‑Know Mini Program Tips to Avoid Common Pitfalls

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.

CanvasQR codeWeChat mini program
0 likes · 7 min read
12 Must‑Know Mini Program Tips to Avoid Common Pitfalls
JD Tech
JD Tech
Aug 23, 2018 · Frontend Development

Implementing Smooth Paper‑Plane Animations with CSS3, Canvas and Bezier Curves in a Mini‑Program

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.

BezierCanvasanimation
0 likes · 10 min read
Implementing Smooth Paper‑Plane Animations with CSS3, Canvas and Bezier Curves in a Mini‑Program
360 Tech Engineering
360 Tech Engineering
Jul 5, 2018 · Frontend Development

SpriteJS: Redefining the Canvas API for Cross‑Platform Frontend Development

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.

CanvasFrontendSpriteJS
0 likes · 7 min read
SpriteJS: Redefining the Canvas API for Cross‑Platform Frontend Development
360 Zhihui Cloud Developer
360 Zhihui Cloud Developer
Jun 20, 2018 · Frontend Development

Unlock Stunning Canvas Animations with SpriteJS – A Complete Beginner’s Guide

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.

CanvasFrontendGraphics
0 likes · 32 min read
Unlock Stunning Canvas Animations with SpriteJS – A Complete Beginner’s Guide
360 Tech Engineering
360 Tech Engineering
Jun 20, 2018 · Frontend Development

Introducing SpriteJS: A Cross‑Platform Canvas Rendering Library for Animations and Data Visualization

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.

CanvasData VisualizationJavaScript
0 likes · 27 min read
Introducing SpriteJS: A Cross‑Platform Canvas Rendering Library for Animations and Data Visualization
360 Quality & Efficiency
360 Quality & Efficiency
Jun 20, 2018 · Frontend Development

SpriteJS: A Cross‑Platform Canvas Library for Web Animation, Visualization, and Interaction

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.

CanvasData VisualizationJavaScript
0 likes · 29 min read
SpriteJS: A Cross‑Platform Canvas Library for Web Animation, Visualization, and Interaction
JD Tech
JD Tech
May 22, 2018 · Frontend Development

Getting Started with WebGL: Drawing a Point Using Shaders

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.

3DCanvasShaders
0 likes · 9 min read
Getting Started with WebGL: Drawing a Point Using Shaders
Meitu Technology
Meitu Technology
Apr 27, 2018 · Frontend Development

Front-End Image Processing: Scaling, Cropping, and Rotation with Canvas

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.

CanvasFrontendScaling
0 likes · 10 min read
Front-End Image Processing: Scaling, Cropping, and Rotation with Canvas
Aotu Lab
Aotu Lab
Nov 3, 2017 · Game Development

Build a One‑Stroke Puzzle Game with Auto‑Graph Recognition

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.

CanvasJavaScriptgraph theory
0 likes · 15 min read
Build a One‑Stroke Puzzle Game with Auto‑Graph Recognition
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Aug 23, 2017 · Frontend Development

Why HTML5 Became the Web’s Game-Changer: History, Features, and Future

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.

CanvasFrontendHTML5
0 likes · 12 min read
Why HTML5 Became the Web’s Game-Changer: History, Features, and Future
Aotu Lab
Aotu Lab
Jul 14, 2017 · Frontend Development

How to Generate Hundreds of Non‑Overlapping Circles Quickly with Canvas

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.

Canvascollision-detectiongame-development
0 likes · 13 min read
How to Generate Hundreds of Non‑Overlapping Circles Quickly with Canvas
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jul 6, 2017 · Frontend Development

Fix Mobile Photo Rotation Issues with EXIF and Canvas

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.

CanvasEXIFFrontend
0 likes · 5 min read
Fix Mobile Photo Rotation Issues with EXIF and Canvas
Aotu Lab
Aotu Lab
Dec 9, 2016 · Frontend Development

How a 1 KB JavaScript Demo Creates a 3D Fire‑Extinguishing Game

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.

3DCanvasJavaScript
0 likes · 16 min read
How a 1 KB JavaScript Demo Creates a 3D Fire‑Extinguishing Game
Tencent TDS Service
Tencent TDS Service
Apr 14, 2016 · Frontend Development

Build a Simple Canvas Particle Engine from Scratch

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.

CanvasJavaScriptParticle Engine
0 likes · 12 min read
Build a Simple Canvas Particle Engine from Scratch
Baidu Maps Tech Team
Baidu Maps Tech Team
Mar 1, 2016 · Frontend Development

How Baidu Maps Turns Massive Geodata into Interactive Visual Stories

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.

Baidu MapsCanvasData Visualization
0 likes · 12 min read
How Baidu Maps Turns Massive Geodata into Interactive Visual Stories