### Start a Simple Quiz Source: https://hanziwriter.org/docs.html Initiate a basic quiz for a character using the `quiz()` method. The character is created with specified dimensions and padding. ```javascript var writer = HanziWriter.create('character-target-div', '测', { width: 150, height: 150, showCharacter: false, padding: 5 }); writer.quiz(); ``` -------------------------------- ### Load Hanzi Writer via npm Source: https://hanziwriter.org/docs.html Install Hanzi Writer using npm and require it in your Node.js or webpack project. ```javascript const HanziWriter = require('hanzi-writer'); ``` -------------------------------- ### writer.quiz(options) Source: https://hanziwriter.org/docs.html Starts a quiz session for drawing Chinese characters. It allows for detailed configuration of quiz behavior, including callback functions for different events and various grading leniency and hint options. ```APIDOC ## writer.quiz(options) ### Description Starts a quiz session for drawing Chinese characters. This method allows for detailed configuration of quiz behavior through an `options` object. ### Method `quiz` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **options** (object) - Required - An object containing additional configuration options for the quiz. The available options are: - **onComplete** (function) - Called when the quiz is complete. Receives an object with `totalMistakes`. - **onCorrectStroke** (function) - Called when a stroke is drawn correctly. Receives an object with `totalMistakes`, `strokeNum`, `mistakesOnStroke`, `strokesRemaining`, and `drawnPath`. - **onMistake** (function) - Called when a mistake is made drawing a stroke. Receives an object with `totalMistakes`, `strokeNum`, `mistakesOnStroke`, `strokesRemaining`, and `drawnPath`. - **showHintAfterMisses** (integer | boolean) - Optional - The number of misses before a stroke highlight hint is given. Defaults to 3. Set to `false` to disable. - **markStrokeCorrectAfterMisses** (integer) - Optional - The number of misses before a stroke is automatically marked correct. Defaults to disabled. - **quizStartStrokeNum** (integer) - Optional - The stroke number to start the quiz from. Defaults to 0. - **acceptBackwardsStrokes** (boolean) - Optional - Allows strokes to be drawn backwards. Defaults to `false`. - **leniency** (float) - Optional - Controls stroke grading leniency. Defaults to 1.0 (lesser values are stricter). - **highlightOnComplete** (boolean) - Optional - Controls whether the character is highlighted upon quiz completion. Defaults to `true`. ### Request Example ```json { "onComplete": function(data) { console.log(data.totalMistakes); }, "onMistake": function(data) { console.log(data.strokeNum); }, "showHintAfterMisses": 5 } ``` ### Response None directly returned, behavior is controlled by callbacks. ``` -------------------------------- ### Create Hanzi Writer Instance with Custom Colors Source: https://hanziwriter.org/docs.html Render a character with custom stroke color. This example uses pink for the stroke. ```javascript var writer = HanziWriter.create('character-target-div', '爽', { width: 150, height: 150, padding: 20, strokeColor: '#EE00FF' // pink }); ``` -------------------------------- ### Load Character Data Inline with NPM Source: https://hanziwriter.org/docs.html Load character data directly from the hanzi-writer-data NPM module for instant rendering without AJAX. Ensure the module is installed via 'npm install hanzi-writer-data'. ```javascript var ren = require('hanzi-writer-data/人'); var writer = HanziWriter.create('target', '人', { charDataLoader: function() { return ren; } }); ``` -------------------------------- ### Create Hanzi Writer Instance with Radical Color Source: https://hanziwriter.org/docs.html Render a character with a specific color for its radical. This example colors the radical of '草' green. ```javascript var writer = HanziWriter.create('character-target-div', '草', { width: 150, height: 150, padding: 5, radicalColor: '#168F16' // green }); ``` -------------------------------- ### writer.loopCharacterAnimation Source: https://hanziwriter.org/docs.html Starts an animation of the character's strokes that loops indefinitely. ```APIDOC ## writer.loopCharacterAnimation() ### Description Animates the strokes of the character in order, and then restarts the animation after it finishes forever. ### Method JavaScript Function ``` -------------------------------- ### Configurable Character Animation Source: https://hanziwriter.org/docs.html Animates a character with custom animation speed, stroke delay, and radical color. The character outline is hidden in this example. Ensure the 'animate-button' exists in the HTML. ```javascript var writer = HanziWriter.create('character-target-div', '激', { width: 100, height: 100, padding: 5, showOutline: false, strokeAnimationSpeed: 5, // 5x normal speed delayBetweenStrokes: 10, // milliseconds radicalColor: '#337ab7' // blue }); document.getElementById('animate-button').addEventListener('click', function() { writer.animateCharacter(); }); ``` -------------------------------- ### Create Basic Hanzi Writer Instance Source: https://hanziwriter.org/docs.html Render a character in a target div with specified dimensions and padding. Assumes a div with id 'character-target-div' exists in the HTML. ```javascript var writer = HanziWriter.create('character-target-div', '我', { width: 100, height: 100, padding: 5 }); ``` -------------------------------- ### HanziWriter Constructor Source: https://hanziwriter.org/docs.html Initializes a new HanziWriter instance. This is the core class for rendering Hanzi characters. It can render into a DOM element or an SVG element. ```APIDOC ## HanziWriter Constructor ### Description Set up a new HanziWriter instance for the specified DOM element. ### Method `new HanziWriter(element, options)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body * **element** (DOM node or ID) - The DOM node or ID of the element to render into. * **options** (object) - An object containing additional configuration options. * `showOutline` (boolean) - Default: `true`. Controls whether the outline is shown or hidden on the first render. * `showCharacter` (boolean) - Default: `true`. Controls whether the character is shown or hidden on the first render. * `width` (number) - Width of the canvas in px. * `height` (number) - Height of the canvas in px. * `padding` (number) - Default: `20`. Padding between the character and edge of the canvas in px. * `strokeAnimationSpeed` (number) - Default: `1`. Speed at which to draw each stroke (must be > 0). * `strokeHighlightSpeed` (number) - Default: `2`. Speed at which to highlight each stroke during quizzes (must be > 0). * `strokeFadeDuration` (number) - Default: `400`. Time in milliseconds to transition between showing and hiding strokes. * `delayBetweenStrokes` (number) - Default: `1000`. Time in milliseconds between each stroke during animation. * `delayBetweenLoops` (number) - Default: `2000`. Time in milliseconds between each animation loop. * `strokeColor` (hex string) - Default: `'#555'`. The color to draw each stroke. * `radicalColor` (hex string) - Default: `null`. The color to draw the radical in the stroke, if radical data is present. * `highlightColor` (hex string) - Default: `'#AAF'`. The color to use for highlighting in quizzes. * `outlineColor` (hex string) - Default: `'#DDD'`. The color of the character outline. * `drawingColor` (hex string) - Default: `'#333'`. The color of the lines drawn by users during quizzing. * `drawingWidth` (number) - Default: `4`. The width of the lines drawn by users during quizzing in px. * `showHintAfterMisses` (integer) - Default: `3`. Number of misses before a stroke highlight hint is given. Set to `false` to disable. * `markStrokeCorrectAfterMisses` (integer) - Default: `disabled`. Number of misses before forcing the stroke to be marked correct. * `quizStartStrokeNum` (integer) - Default: `0`. Stroke number to start the quiz at. * `acceptBackwardsStrokes` (boolean) - Default: `false`. Allow stroke to be drawn backwards during quizzing. * `highlightOnComplete` (boolean) - Default: `true`. Controls whether to highlight the character on completion in quizzes. * `highlightCompleteColor` (hex string) - Default: `null`. Color to use when highlighting the character on complete. Uses `highlightColor` if not set. * `charDataLoader` (function) - Custom function to load character data. * `onLoadCharDataSuccess` (function) - Callback for successful character data loading. * `onLoadCharDataError` (function) - Callback for failed character data loading. * `renderer` (string) - Default: `'svg'`. Set to `'canvas'` to render using a 2D canvas. ### Request Example ```javascript var writer = HanziWriter.create('grid-background-target', '酷', { width: 100, height: 100, padding: 5, }); ``` ### Response None ### Error Handling None ``` -------------------------------- ### Basic Character Animation Source: https://hanziwriter.org/docs.html Creates a HanziWriter instance and animates the character when the 'Animate' button is clicked. Requires the HanziWriter library to be loaded. ```javascript var writer = HanziWriter.create('character-target-div', '国', { width: 100, height: 100, padding: 5, showOutline: true }); document.getElementById('animate-button').addEventListener('click', function() { writer.animateCharacter(); }); ``` -------------------------------- ### HanziWriter.create Source: https://hanziwriter.org/docs.html Initializes a new HanziWriter instance to render a character within a specified DOM element. It allows for extensive customization of the character's appearance, animation, and interactive behavior. ```APIDOC ## HanziWriter.create(element, character, options) ### Description Set up a new HanziWriter instance the specified DOM element. ### Parameters #### Path Parameters - **element** (DOM node or ID) - The DOM node or ID of the element to render into. - **character** (string) - The character to draw, ex '你'. #### Query Parameters - **options** (object) - An object containing additional configuration options. * `showOutline:` (boolean, default true) - Controls whether the outline is shown or hidden on the first render. * `showCharacter:` (boolean, default true) - Controls whether the character is shown or hidden on the first render. * `width:` (number) - Width of the canvas in px. * `height:` (number) - height of the canvas in px. * `padding:` (number, default 20) - padding between the character and edge of the canvas in px. * `strokeAnimationSpeed:` (number, default 1) - Speed at which to draw each stroke, must be greater than 0. * `strokeHighlightSpeed:` (number, default 2) - Speed at which to highlight each stroke when givings hints in a quiz, must be greater than 0. * `strokeFadeDuration:` (number, default 400) - Time in milliseconds to transition between showing and hiding strokes when calling `writer.show()` and `writer.hide()`. * `delayBetweenStrokes:` (number, default 1000) - Time in milliseconds between each stroke when animating. * `delayBetweenLoops:` (number, default 2000) - Time in milliseconds between each animation loop when looping animations. * `strokeColor:` (hex string, default '#555') - The color to draw each stroke. * `radicalColor:` (hex string, default null) - The color to draw the radical in the stroke, if radical data is present. * `highlightColor:` (hex string, default '#AAF') - The color to use for highlighting in quizzes. * `outlineColor:` (hex string, default '#DDD') - The color of the character outline. * `drawingColor:` (hex string, default '#333') - The color of the lines drawn by users during quizzing. * `drawingWidth:` (number, default 4) - The width of the lines drawn by users during quizzing in px. * `showHintAfterMisses:` (integer, default 3) - The number of misses before a stroke highlight hint is given to the user. Set to false to disable. * `markStrokeCorrectAfterMisses:` (integer, default disabled) - The number of misses before forcing the stroke to be marked correct. * `quizStartStrokeNum:` (integer, default 0) - This can be set to start the quiz at a stroke other than the first stroke. * `acceptBackwardsStrokes:` (boolean, default false) - Allow stroke to be drawn backwards during quizzing. * `highlightOnComplete:` (boolean, default true) - Controls whether a quiz briefly highlights the character when the user finishes drawing the whole character. * `highlightCompleteColor:` (hex string, default null) - The color to use when highlighting the character on complete in quizzes. * `charDataLoader:` (function) - Custom function to load charater data. * `onLoadCharDataSuccess:` (function) - Callback for when character data is loaded successfully. * `onLoadCharDataError:` (function) - Callback for when character data loading fails. * `renderer:` (string, default 'svg') - Set this to 'canvas' to render using a 2d canvas instead of SVG. ``` -------------------------------- ### Load Hanzi Writer via CDN Source: https://hanziwriter.org/docs.html Include the Hanzi Writer JavaScript file directly from a CDN in your HTML's head. ```html ``` -------------------------------- ### Include Promise Polyfill for Old Browsers Source: https://hanziwriter.org/docs.html Add a polyfill for the Promise API using polyfill.io before loading Hanzi Writer for compatibility with Internet Explorer 10 and 11. ```html ``` -------------------------------- ### HTML for HanziWriter Animation Source: https://hanziwriter.org/docs.html This HTML sets up a target div for the character and a button to trigger the animation. ```html
``` -------------------------------- ### Integrating Quiz Callbacks Source: https://hanziwriter.org/docs.html Use the `quiz()` method with callbacks to react to quiz events. The `onMistake`, `onCorrectStroke`, and `onComplete` callbacks receive data about the quiz state, allowing you to log information or trigger other actions. ```javascript var writer = HanziWriter.create('character-target-div', '码', { width: 150, height: 150, showCharacter: false, padding: 5 }); writer.quiz({ onMistake: function(strokeData) { console.log('Oh no! you made a mistake on stroke ' + strokeData.strokeNum); console.log("You've made " + strokeData.mistakesOnStroke + " mistakes on this stroke so far"); console.log("You've made " + strokeData.totalMistakes + " total mistakes on this quiz"); console.log("There are " + strokeData.strokesRemaining + " strokes remaining in this character"); }, onCorrectStroke: function(strokeData) { console.log('Yes!!! You got stroke ' + strokeData.strokeNum + ' correct!'); console.log('You made ' + strokeData.mistakesOnStroke + ' mistakes on this stroke'); console.log("You've made " + strokeData.totalMistakes + ' total mistakes on this quiz'); console.log('There are ' + strokeData.strokesRemaining + ' strokes remaining in this character'); }, onComplete: function(summaryData) { console.log('You did it! You finished drawing ' + summaryData.character); console.log('You made ' + summaryData.totalMistakes + ' total mistakes on this quiz'); } }); ``` -------------------------------- ### Configure Quiz Behavior Source: https://hanziwriter.org/docs.html Customize quiz behavior by adjusting options like `showHintAfterMisses` and `highlightOnComplete`. `showOutline` is set to false for increased difficulty. ```javascript var writer = HanziWriter.create('character-target-div', '鬼', { width: 150, height: 150, showCharacter: false, showOutline: false, showHintAfterMisses: 1, highlightOnComplete: false, padding: 5 }); writer.quiz(); ``` -------------------------------- ### Render Fanning Strokes Visualization Source: https://hanziwriter.org/docs.html A helper function `renderFanningStrokes` is defined to create and append SVG paths for a character's strokes. The main logic then loads character data for '是' and calls `renderFanningStrokes` iteratively to create a fanning stroke visualization. ```javascript function renderFanningStrokes(target, strokes) { var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.style.width = '75px'; svg.style.height = '75px'; svg.style.border = '1px solid #EEE' svg.style.marginRight = '3px' target.appendChild(svg); var group = document.createElementNS('http://www.w3.org/2000/svg', 'g'); // set the transform property on the g element so the character renders at 75x75 var transformData = HanziWriter.getScalingTransform(75, 75); group.setAttributeNS(null, 'transform', transformData.transform); svg.appendChild(group); strokes.forEach(function(strokePath) { var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttributeNS(null, 'd', strokePath); // style the character paths path.style.fill = '#555'; group.appendChild(path); }); } HanziWriter.loadCharacterData('是').then(function(charData) { var target = document.getElementById('target'); for (var i = 0; i < charData.strokes.length; i++) { var strokesPortion = charData.strokes.slice(0, i + 1); renderFanningStrokes(target, strokesPortion); } }); ``` -------------------------------- ### Character Data Load Callbacks Source: https://hanziwriter.org/docs.html Implement onLoadCharDataSuccess and onLoadCharDataError callbacks to handle character data loading status. This allows for visual feedback like loading spinners or error messages. ```javascript var ren = require('hanzi-writer-data/人'); var writer = HanziWriter.create('target', '人', { onLoadCharDataSuccess: function(data) { console.log('Success!'); }, onLoadCharDataError: function(reason) { console.log('Oh No! Something went wrong :('); } }); ``` -------------------------------- ### writer.resumeAnimation Source: https://hanziwriter.org/docs.html Resumes any animations that were previously paused. ```APIDOC ## writer.resumeAnimation() ### Description Resumes any animations that were previously paused with `pauseAnimation()`. ### Method JavaScript Function ``` -------------------------------- ### Render HanziWriter into SVG Element Source: https://hanziwriter.org/docs.html This JavaScript code initializes a HanziWriter instance, targeting an SVG element by its ID. It configures the writer with specific dimensions and padding. ```javascript var writer = HanziWriter.create('grid-background-target', '酷', { width: 100, height: 100, padding: 5, }); ``` -------------------------------- ### writer.showOutline Source: https://hanziwriter.org/docs.html Displays the character outline if it is currently hidden. Accepts an options object for customization. ```APIDOC ## writer.showOutline(options = {}) ### Description Shows the outline if it's currently hidden. Accepts an `options` object for customization. ### Method JavaScript Function ### Parameters #### Options Object - **onComplete** (function) - Called when the showing animation is complete. - **duration** (number, optional) - How long the showing animation should take to complete. Defaults to `strokeFadeDuration`. Passing 0 makes the operation instant. ``` -------------------------------- ### writer.updateDimensions Source: https://hanziwriter.org/docs.html Updates the size of the writer instance. Accepts an options object to set new width, height, or padding. ```APIDOC ## writer.updateDimensions(options = {}) ### Description Updates the size of the writer instance. Accepts an `options` object for customization. ### Method JavaScript Function ### Parameters #### Options Object - **width** (number, optional) - The new width in pixels. - **height** (number, optional) - The new height in pixels. - **padding** (number, optional) - The new padding in pixels. ``` -------------------------------- ### writer.hideOutline Source: https://hanziwriter.org/docs.html Hides the character outline if it is currently shown. Accepts an options object for customization. ```APIDOC ## writer.hideOutline(options = {}) ### Description Hides the outline if it's currently shown. Accepts an `options` object for customization. ### Method JavaScript Function ### Parameters #### Options Object - **onComplete** (function) - Called when the hiding animation is complete. - **duration** (number, optional) - How long the hiding animation should take to complete. Defaults to `strokeFadeDuration`. Passing 0 makes the operation instant. ``` -------------------------------- ### Looping Character Animation Source: https://hanziwriter.org/docs.html Sets up a character to loop its animation indefinitely with a specified delay between loops. The character will redraw itself every 3 seconds. ```javascript var writer = HanziWriter.create('character-target-div', '轮', { width: 100, height: 100, padding: 5, delayBetweenLoops: 3000 }); writer.loopCharacterAnimation(); ``` -------------------------------- ### HanziWriter.loadCharacterData Source: https://hanziwriter.org/docs.html Loads raw character data from the HanziWriter CDN. This method returns a promise that resolves when the character data has been successfully loaded. ```APIDOC ## HanziWriter.loadCharacterData(character, options = {}) ### Description Load raw character data from the Hanzi Writer CDN. Returns a promise which resolves when loading is complete. ### Parameters #### Path Parameters - **character** (string) - The character to draw, ex '你'. #### Query Parameters - **options** (object, default {}) - An object containing additional configuration options. * `charDataLoader:` (function) - Custom function to load charater data. * `onLoadCharDataSuccess:` (function) - Callback for when character data is loaded successfully. * `onLoadCharDataError:` (function) - Callback for when character data loading fails. ``` -------------------------------- ### writer.showCharacter Source: https://hanziwriter.org/docs.html Displays the character if it is currently hidden. Accepts an options object for customization. ```APIDOC ## writer.showCharacter(options = {}) ### Description Shows the character if it's currently hidden. Accepts an `options` object for customization. ### Method JavaScript Function ### Parameters #### Options Object - **onComplete** (function) - Called when the showing animation is complete. - **duration** (number, optional) - How long the showing animation should take to complete. Defaults to `strokeFadeDuration`. Passing 0 makes the operation instant. ``` -------------------------------- ### Chain Character Animations with onComplete Source: https://hanziwriter.org/docs.html Use the `onComplete` callback in `animateCharacter` to sequence animations. A delay is introduced between animations using `setTimeout`. ```html
``` ```javascript var char1 = HanziWriter.create('character-target-1', '很', { width: 100, height: 100, padding: 5, showCharacter: false }); var char2 = HanziWriter.create('character-target-2', '爽', { width: 100, height: 100, padding: 5, showCharacter: false }); function chainAnimations() { var delayBetweenAnimations = 1000; // milliseconds char1.hideCharacter(); char2.hideCharacter(); char1.animateCharacter({ onComplete: function() { setTimeout(function() { char2.animateCharacter(); }, delayBetweenAnimations); } }); } document.getElementById('animate-button').addEventListener('click', chainAnimations); ``` -------------------------------- ### Custom Character Data Loader with jQuery Source: https://hanziwriter.org/docs.html Load character data from a custom server endpoint using jQuery's getJSON. This is useful for embedding Hanzi Writer into websites where data is hosted on your own server. ```javascript var writer = HanziWriter.create('target', '我', { charDataLoader: function(char, onComplete) { $.getJSON("/my/server/" + char + ".json", function(charData) { onComplete(charData); }); } }); ``` -------------------------------- ### Create SVG Grid Background Source: https://hanziwriter.org/docs.html This SVG code defines a simple grid pattern to be used as a background. It includes lines for a 100x100 grid with a light gray stroke. ```html ``` -------------------------------- ### Load and Render Character SVG at Specific Size Source: https://hanziwriter.org/docs.html Loads character data for '六' and renders its SVG at 150x150 pixels within a specified target element. This demonstrates using `loadCharacterData` and `getScalingTransform`. ```javascript HanziWriter.loadCharacterData('六').then(function(charData) { var target = document.getElementById('target'); var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.style.width = '150px'; svg.style.height = '150px'; target.appendChild(svg); var group = document.createElementNS('http://www.w3.org/2000/svg', 'g'); // set the transform property on the g element so the character renders at 150x150 var transformData = HanziWriter.getScalingTransform(150, 150); group.setAttributeNS(null, 'transform', transformData.transform); svg.appendChild(group); charData.strokes.forEach(function(strokePath) { var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttributeNS(null, 'd', strokePath); // style the character paths path.style.fill = '#555'; group.appendChild(path); }); }); ``` -------------------------------- ### Basic SVG Structure for HanziWriter Character Source: https://hanziwriter.org/docs.html This is a basic SVG structure showing how HanziWriter character data is typically rendered within a `` tag, including the necessary transform for scaling and positioning. ```html ... ``` -------------------------------- ### HanziWriter.getScalingTransform Source: https://hanziwriter.org/docs.html Calculates and returns an object with SVG transform details for rendering raw character data. This is useful for dynamically scaling and positioning character paths within an SVG element. ```APIDOC ## HanziWriter.getScalingTransform(width, height, padding = 0) ### Description Returns an object containing scaling info which can be used when rendering raw character data in SVG. ### Method `getScalingTransform` ### Parameters #### Path Parameters - **width** (number) - Required - The width of the character to be rendered in px. - **height** (number) - Required - The height of the character to be rendered in px. - **padding** (number) - Optional - Extra padding around the character. Defaults to 0. ### Return Value An object containing the following keys: - **x** (number) - The x offset used in translate. - **y** (number) - The y offset used in translate. - **scale** (number) - The scale used in the scale part of the transform. - **transform** (string) - The SVG transform string which can be directly used in the `transform` attribute of a `` element to scale and position character path strings in SVG. ``` -------------------------------- ### writer.cancelQuiz() Source: https://hanziwriter.org/docs.html Cancels the currently active quiz session. ```APIDOC ## writer.cancelQuiz() ### Description Cancels the quiz currently in progress. ### Method `cancelQuiz` ### Parameters None ### Request Example ```json {} ``` ### Response None ``` -------------------------------- ### writer.pauseAnimation Source: https://hanziwriter.org/docs.html Pauses any currently running animations. ```APIDOC ## writer.pauseAnimation() ### Description Pauses any currently running animations. ### Method JavaScript Function ``` -------------------------------- ### writer.animateCharacter Source: https://hanziwriter.org/docs.html Animates the strokes of the character in order. Accepts an options object, primarily for a completion callback. ```APIDOC ## writer.animateCharacter(options = {}) ### Description Animates the strokes of the character in order. Accepts an `options` object. ### Method JavaScript Function ### Parameters #### Options Object - **onComplete** (function) - Called when the animation is complete. ``` -------------------------------- ### writer.setCharacter Source: https://hanziwriter.org/docs.html Replaces the currently drawn character with a new one, resetting any ongoing animations or quizzes. ```APIDOC ## writer.setCharacter(character) ### Description Replaces the currently drawn character with a new one. This will reset any quizzes or animations in progress. ### Method JavaScript Function ### Parameters - **character** (string) - The character to draw (e.g., '你'). ``` -------------------------------- ### writer.highlightStroke Source: https://hanziwriter.org/docs.html Highlights a single specified stroke of the character. Accepts the stroke number and an options object for customization. ```APIDOC ## writer.highlightStroke(strokeNum, options = {}) ### Description Highlights a single stroke of the character. Accepts the stroke number and an `options` object. ### Method JavaScript Function ### Parameters - **strokeNum** (number) - The stroke number to highlight, starting at 0. #### Options Object - **onComplete** (function) - Called when the animation is complete. ``` -------------------------------- ### writer.updateColor Source: https://hanziwriter.org/docs.html Updates a specific color setting for the character. Accepts a color name, value, and optional animation options. ```APIDOC ## writer.updateColor(colorName, colorVal, options = {}) ### Description Updates a color setting. Accepts the name of the color to update, the new color value, and an optional `options` object for animation. ### Method JavaScript Function ### Parameters - **colorName** (string) - One of 'strokeColor', 'radicalColor', 'outlineColor', 'highlightColor', or 'drawingColor'. - **colorVal** (string) - A CSS color string (e.g., '#AA9913', 'rgba(255, 255, 10, 0.7)'). #### Options Object - **onComplete** (function) - Called when the animation is complete. - **duration** (number, optional) - How long the animation should take to complete. Defaults to `strokeFadeDuration`. Passing 0 makes the operation instant. ``` -------------------------------- ### writer.animateStroke Source: https://hanziwriter.org/docs.html Animates a single specified stroke of the character. Accepts the stroke number and an options object for customization. ```APIDOC ## writer.animateStroke(strokeNum, options = {}) ### Description Animates a single stroke of the character. Accepts the stroke number and an `options` object. ### Method JavaScript Function ### Parameters - **strokeNum** (number) - The stroke number to animate, starting at 0. #### Options Object - **onComplete** (function) - Called when the animation is complete. ``` -------------------------------- ### writer.hideCharacter Source: https://hanziwriter.org/docs.html Hides the character if it is currently shown. Accepts an options object for customization. ```APIDOC ## writer.hideCharacter(options = {}) ### Description Hides the character if it's currently shown. Accepts an `options` object for customization. ### Method JavaScript Function ### Parameters #### Options Object - **onComplete** (function) - Called when the hiding animation is complete. - **duration** (number, optional) - How long the hiding animation should take to complete. Defaults to `strokeFadeDuration`. Passing 0 makes the operation instant. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.