Merge pull request #367 from dynamsoft-docs/Tom-Dynamsoft-patch-5

add how to change a preset style code snippet

Author: Tom-Dynamsoft

programming/javascript/upgrade-guide/9to10.md

@@ -146,13 +146,23 @@ The following assumes `ScanSettings` is the object returned by `reader.getScanSe
 | `scanner.getUIElement()`                                                                                                                         | [cameraView.getUIElement()](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html#getuielement)                                        |
 | `scanner.setUIElement()`                                                                                                                         | [cameraView.setUIElement()](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html#setuielement)                                        |
 | `Dynamsoft.DBR.BarcodeScanner.defaultUIElementURL="THE-URL-TO-THE-HTML"`                                                                         | [Dynamsoft.DCE.CameraView.createInstance("THE-URL-TO-THE-HTML")](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html#createinstance) |
-| `scanner.barcodeFillStyle` <br>`scanner.barcodeStrokeStyle` <br>`scanner.barcodeLineWidth`                                                       | Change the preset style `STYLE_ORANGE_STROKE` (ID = 2).                                                                                                                                   |
-| `scanner.barcodeFillStyleBeforeVerification` <br>`scanner.barcodeStrokeStyleBeforeVerification` <br>`scanner.barcodeLineWidthBeforeVerification` | Change the preset style `STYLE_ORANGE_STROKE_TRANSPARENT` (ID = 10).                                                                                                                      |
+| `scanner.barcodeFillStyle` <br>`scanner.barcodeStrokeStyle` <br>`scanner.barcodeLineWidth`                                                       | [Change the preset style](#how-to-change-a-preset-style) `STYLE_ORANGE_STROKE` (ID = 2) .                                                                                                                                   |
+| `scanner.barcodeFillStyleBeforeVerification` <br>`scanner.barcodeStrokeStyleBeforeVerification` <br>`scanner.barcodeLineWidthBeforeVerification` | [Change the preset style](#how-to-change-a-preset-style) `STYLE_ORANGE_STROKE_TRANSPARENT` (ID = 10).                                                                                                                      |
 | `scanner.regionMaskFillStyle` <br>`scanner.regionMaskStrokeStyle` <br>`scanner.regionMaskLineWidth`                                              | [cameraView.setScanRegionMaskStyle()](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html#setscanregionmaskstyle)                    |
 | `scanner.setVideoFit()`                                                                                                                          | [cameraView.setVideoFit()](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html#setvideofit)                                          |
 | `scanner.getVideoFit()`                                                                                                                          | [cameraView.getVideoFit()](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html#getvideofit)                                          |
 | `scanner.ifShowScanRegionMask`                                                                                                                   | [cameraView.setScanRegionMaskVisible()](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/cameraview.html#setscanregionmaskvisible)                |
 
+### How to change a preset style
+
+```javascript
+// Step one: get a copy of the preset style
+let dbrStyle = Dynamsoft.DCE.DrawingStyleManager.getDrawingStyle(Dynamsoft.DCE.DrawingStyleManager.STYLE_ORANGE_STROKE);
+// Step two: make changes to the copy
+dbrStyle.fillStyle = 'rgba(100,100,300,0.5)';
+// Step three: update the original preset style with the copy
+Dynamsoft.DCE.DrawingStyleManager.updateDrawingStyle(Dynamsoft.DCE.DrawingStyleManager.STYLE_ORANGE_STROKE,dbrStyle);
+```
 
 ## Change the APIs for camera control