diff --git a/interfaces/kits/napi/graphic/drawing/js_drawing_utils.h b/interfaces/kits/napi/graphic/drawing/js_drawing_utils.h
index b6cd4cee41..2089a032d6 100644
--- a/interfaces/kits/napi/graphic/drawing/js_drawing_utils.h
+++ b/interfaces/kits/napi/graphic/drawing/js_drawing_utils.h
@@ -29,6 +29,7 @@
 
 namespace OHOS::Rosen {
 namespace Drawing {
+constexpr size_t ARGC_ZERO = 0;
 constexpr size_t ARGC_ONE = 1;
 constexpr size_t ARGC_TWO = 2;
 constexpr size_t ARGC_THREE = 3;
@@ -36,6 +37,7 @@ constexpr size_t ARGC_FOUR = 4;
 constexpr size_t ARGC_FIVE = 5;
 constexpr size_t ARGC_SIX = 6;
 constexpr size_t ARGC_SEVEN = 7;
+constexpr int NUMBER_TWO = 2;
 
 enum class DrawingErrorCode : int32_t {
     OK = 0,
diff --git a/interfaces/kits/napi/graphic/drawing/mask_filter_napi/js_mask_filter.cpp b/interfaces/kits/napi/graphic/drawing/mask_filter_napi/js_mask_filter.cpp
new file mode 100755
index 0000000000..ade784abc8
--- /dev/null
+++ b/interfaces/kits/napi/graphic/drawing/mask_filter_napi/js_mask_filter.cpp
@@ -0,0 +1,147 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "js_mask_filter.h"
+#include "js_drawing_utils.h"
+#include "native_value.h"
+
+namespace OHOS::Rosen {
+namespace Drawing {
+const std::string CLASS_NAME = "MaskFilter";
+thread_local napi_ref JsMaskFilter::constructor_ = nullptr;
+napi_value JsMaskFilter::Init(napi_env env, napi_value exportObj)
+{
+    napi_property_descriptor properties[] = {
+        DECLARE_NAPI_STATIC_FUNCTION("createBlurMaskFilter", JsMaskFilter::CreateBlurMaskFilter),
+    };
+
+    napi_value constructor = nullptr;
+    napi_status status = napi_define_class(env, CLASS_NAME.c_str(), NAPI_AUTO_LENGTH, Constructor, nullptr,
+                                           sizeof(properties) / sizeof(properties[0]), properties, &constructor);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsMaskFilter::Init failed to define maskFilter class");
+        return nullptr;
+    }
+
+    status = napi_create_reference(env, constructor, 1, &constructor_);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsMaskFilter::Init failed to create reference of constructor");
+        return nullptr;
+    }
+
+    status = napi_set_named_property(env, exportObj, CLASS_NAME.c_str(), constructor);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsMaskFilter::Init failed to set constructor");
+        return nullptr;
+    }
+
+    status = napi_define_properties(env, exportObj, sizeof(properties) / sizeof(properties[0]), properties);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsMaskFilter::Init failed to define static function");
+        return nullptr;
+    }
+    return exportObj;
+}
+
+void JsMaskFilter::Finalizer(napi_env env, void* data, void* hint)
+{
+    std::unique_ptr<JsMaskFilter>(static_cast<JsMaskFilter*>(data));
+}
+
+JsMaskFilter::~JsMaskFilter()
+{
+    m_maskFilter = nullptr;
+}
+
+napi_value JsMaskFilter::Constructor(napi_env env, napi_callback_info info)
+{
+    size_t argCount = 0;
+    napi_value jsThis = nullptr;
+    napi_status status = napi_get_cb_info(env, info, &argCount, nullptr, &jsThis, nullptr);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsMaskFilter::Constructor failed to napi_get_cb_info");
+        return nullptr;
+    }
+
+    JsMaskFilter *jsMaskFilter = new(std::nothrow) JsMaskFilter();
+    status = napi_wrap(env, jsThis, jsMaskFilter, JsMaskFilter::Destructor, nullptr, nullptr);
+    if (status != napi_ok) {
+        delete jsMaskFilter;
+        ROSEN_LOGE("JsMaskFilter::Constructor failed to wrap native instance");
+        return nullptr;
+    }
+    return jsThis;
+}
+
+void JsMaskFilter::Destructor(napi_env env, void *nativeObject, void *finalize)
+{
+    (void)finalize;
+    if (nativeObject != nullptr) {
+        JsMaskFilter *napi = reinterpret_cast<JsMaskFilter *>(nativeObject);
+        delete napi;
+    }
+}
+
+napi_value JsMaskFilter::CreateBlurMaskFilter(napi_env env, napi_callback_info info)
+{
+    size_t argc = ARGC_TWO;
+    napi_value argv[ARGC_TWO] = {nullptr};
+    napi_status status = napi_get_cb_info(env, info, &argc, argv, nullptr, nullptr);
+    if (status != napi_ok || argc != ARGC_TWO) {
+        ROSEN_LOGE("JsMaskFilter::CreateBlurMaskFilter argc is invalid: %{public}zu", argc);
+        return NapiThrowError(env, DrawingErrorCode::ERROR_INVALID_PARAM, "Invalid params.");
+    }
+
+    uint32_t blurType = 0;
+    if (!ConvertFromJsNumber(env, argv[ARGC_ZERO], blurType)) {
+        ROSEN_LOGE("JsMaskFilter::CreateBlurMaskFilter Argv[0] is invalid");
+        return NapiGetUndefined(env);
+    }
+
+    double sigma = 0;
+    if (!ConvertFromJsNumber(env, argv[ARGC_ONE], sigma)) {
+        ROSEN_LOGE("JsMaskFilter::CreateBlurMaskFilter Argv[1] is invalid");
+        return NapiGetUndefined(env);
+    }
+
+    auto maskFilter = MaskFilter::CreateBlurMaskFilter(static_cast<BlurType>(blurType), sigma);
+    return JsMaskFilter::Create(env, maskFilter);
+}
+
+napi_value JsMaskFilter::Create(napi_env env, std::shared_ptr<MaskFilter> maskFilter)
+{
+    napi_value objValue = nullptr;
+    napi_create_object(env, &objValue);
+    if (objValue == nullptr || maskFilter == nullptr) {
+        ROSEN_LOGE("JsMaskFilter::Create object is null!");
+        return NapiGetUndefined(env);
+    }
+
+    std::unique_ptr<JsMaskFilter> jsMaskFilter = std::make_unique<JsMaskFilter>(maskFilter);
+    napi_wrap(env, objValue, jsMaskFilter.release(), JsMaskFilter::Finalizer, nullptr, nullptr);
+
+    if (objValue == nullptr) {
+        ROSEN_LOGE("JsMaskFilter::Create object value is null!");
+        return NapiGetUndefined(env);
+    }
+    return objValue;
+}
+
+std::shared_ptr<MaskFilter> JsMaskFilter::GetMaskFilter()
+{
+    return m_maskFilter;
+}
+} // namespace Drawing
+} // namespace OHOS::Rosen
diff --git a/interfaces/kits/napi/graphic/drawing/mask_filter_napi/js_mask_filter.h b/interfaces/kits/napi/graphic/drawing/mask_filter_napi/js_mask_filter.h
new file mode 100755
index 0000000000..4dbafe4eea
--- /dev/null
+++ b/interfaces/kits/napi/graphic/drawing/mask_filter_napi/js_mask_filter.h
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef OHOS_ROSEN_JS_MASK_FILTER_H
+#define OHOS_ROSEN_JS_MASK_FILTER_H
+
+#include <native_engine/native_engine.h>
+#include <native_engine/native_value.h>
+#include "effect/mask_filter.h"
+
+namespace OHOS::Rosen {
+namespace Drawing {
+class JsMaskFilter final {
+public:
+    explicit JsMaskFilter(std::shared_ptr<MaskFilter> maskFilter = nullptr) : m_maskFilter(maskFilter) {}
+    ~JsMaskFilter();
+
+    static napi_value Init(napi_env env, napi_value exportObj);
+    static void Finalizer(napi_env env, void* data, void* hint);
+    static napi_value Constructor(napi_env env, napi_callback_info info);
+    static void Destructor(napi_env env, void *nativeObject, void *finalize);
+
+    static napi_value CreateBlurMaskFilter(napi_env env, napi_callback_info info);
+    std::shared_ptr<MaskFilter> GetMaskFilter();
+
+private:
+    static napi_value Create(napi_env env, std::shared_ptr<MaskFilter> maskFilter);
+    std::shared_ptr<MaskFilter> m_maskFilter = nullptr;
+    static thread_local napi_ref constructor_;
+};
+} // namespace Drawing
+} // namespace OHOS::Rosen
+#endif // OHOS_ROSEN_JS_MASK_FILTER_H
diff --git a/interfaces/kits/napi/graphic/drawing/path_effect_napi/js_path_effect.cpp b/interfaces/kits/napi/graphic/drawing/path_effect_napi/js_path_effect.cpp
new file mode 100755
index 0000000000..bba7efc54d
--- /dev/null
+++ b/interfaces/kits/napi/graphic/drawing/path_effect_napi/js_path_effect.cpp
@@ -0,0 +1,164 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "js_path_effect.h"
+#include "js_drawing_utils.h"
+#include "native_value.h"
+
+namespace OHOS::Rosen {
+namespace Drawing {
+const std::string CLASS_NAME = "PathEffect";
+thread_local napi_ref JsPathEffect::constructor_ = nullptr;
+napi_value JsPathEffect::Init(napi_env env, napi_value exportObj)
+{
+    napi_property_descriptor properties[] = {
+        DECLARE_NAPI_STATIC_FUNCTION("createDashPathEffect", JsPathEffect::CreateDashPathEffect),
+    };
+
+    napi_value constructor = nullptr;
+    napi_status status = napi_define_class(env, CLASS_NAME.c_str(), NAPI_AUTO_LENGTH, Constructor, nullptr,
+                                           sizeof(properties) / sizeof(properties[0]), properties, &constructor);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsPathEffect::Init failed to define pathEffect class");
+        return nullptr;
+    }
+
+    status = napi_create_reference(env, constructor, 1, &constructor_);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsPathEffect::Init failed to create reference of constructor");
+        return nullptr;
+    }
+
+    status = napi_set_named_property(env, exportObj, CLASS_NAME.c_str(), constructor);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsPathEffect::Init failed to set constructor");
+        return nullptr;
+    }
+
+    status = napi_define_properties(env, exportObj, sizeof(properties) / sizeof(properties[0]), properties);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsPathEffect::Init failed to define static function");
+        return nullptr;
+    }
+    return exportObj;
+}
+
+void JsPathEffect::Finalizer(napi_env env, void* data, void* hint)
+{
+    std::unique_ptr<JsPathEffect>(static_cast<JsPathEffect*>(data));
+}
+
+JsPathEffect::~JsPathEffect()
+{
+    m_pathEffect = nullptr;
+}
+
+napi_value JsPathEffect::Constructor(napi_env env, napi_callback_info info)
+{
+    size_t argCount = 0;
+    napi_value jsThis = nullptr;
+    napi_status status = napi_get_cb_info(env, info, &argCount, nullptr, &jsThis, nullptr);
+    if (status != napi_ok) {
+        ROSEN_LOGE("JsPathEffect::Constructor failed to napi_get_cb_info");
+        return nullptr;
+    }
+
+    JsPathEffect *jsPathEffect = new(std::nothrow) JsPathEffect();
+    status = napi_wrap(env, jsThis, jsPathEffect, JsPathEffect::Destructor, nullptr, nullptr);
+    if (status != napi_ok) {
+        delete jsPathEffect;
+        ROSEN_LOGE("JsPathEffect::Constructor failed to wrap native instance");
+        return nullptr;
+    }
+    return jsThis;
+}
+
+void JsPathEffect::Destructor(napi_env env, void *nativeObject, void *finalize)
+{
+    (void)finalize;
+    if (nativeObject != nullptr) {
+        JsPathEffect *napi = reinterpret_cast<JsPathEffect *>(nativeObject);
+        delete napi;
+    }
+}
+
+napi_value JsPathEffect::CreateDashPathEffect(napi_env env, napi_callback_info info)
+{
+    size_t argc = ARGC_TWO;
+    napi_value argv[ARGC_TWO] = {nullptr};
+    napi_status status = napi_get_cb_info(env, info, &argc, argv, nullptr, nullptr);
+    if (status != napi_ok || argc != ARGC_TWO) {
+        ROSEN_LOGE("JsPathEffect::CreateDashPathEffect argc is invalid: %{public}zu", argc);
+        return NapiThrowError(env, DrawingErrorCode::ERROR_INVALID_PARAM, "Invalid params.");
+    }
+
+    uint32_t arrayLength = 0;
+    napi_get_array_length(env, argv[ARGC_ZERO], &arrayLength);
+    if (arrayLength % NUMBER_TWO) { // arrayLength must be an even number
+        ROSEN_LOGE("JsPathEffect::CreateDashPathEffect count of intervals is not even : %{public}zu", arrayLength);
+        return NapiThrowError(env, DrawingErrorCode::ERROR_INVALID_PARAM, "Invalid params.");
+    }
+    scalar intervals[arrayLength];
+    for (size_t i = 0; i < arrayLength; i++) {
+        bool hasElement = false;
+        napi_has_element(env, argv[ARGC_ZERO], i, &hasElement);
+        if (!hasElement) {
+            ROSEN_LOGE("JsPathEffect::CreateDashPathEffect parameter check error");
+            return NapiGetUndefined(env);
+        }
+
+        napi_value element = nullptr;
+        napi_get_element(env, argv[ARGC_ZERO], i, &element);
+
+        double value = 0;
+        ConvertFromJsNumber(env, element, value);
+        intervals[i] = value;
+    }
+
+    double phase = 0;
+    if (!ConvertFromJsNumber(env, argv[ARGC_ONE], phase)) {
+        ROSEN_LOGE("JsPathEffect::CreateDashPathEffect argv[1] is invalid");
+        return NapiGetUndefined(env);
+    }
+
+    std::shared_ptr<PathEffect> pathEffect = PathEffect::CreateDashPathEffect(intervals, arrayLength, phase);
+    return JsPathEffect::Create(env, pathEffect);
+}
+
+napi_value JsPathEffect::Create(napi_env env, std::shared_ptr<PathEffect> pathEffect)
+{
+    napi_value objValue = nullptr;
+    napi_create_object(env, &objValue);
+    if (objValue == nullptr || pathEffect == nullptr) {
+        ROSEN_LOGE("JsPathEffect::Create object is null");
+        return NapiGetUndefined(env);
+    }
+
+    std::unique_ptr<JsPathEffect> jsPathEffect = std::make_unique<JsPathEffect>(pathEffect);
+    napi_wrap(env, objValue, jsPathEffect.release(), JsPathEffect::Finalizer, nullptr, nullptr);
+
+    if (objValue == nullptr) {
+        ROSEN_LOGE("JsPathEffect::Create objValue is null");
+        return NapiGetUndefined(env);
+    }
+    return objValue;
+}
+
+std::shared_ptr<PathEffect> JsPathEffect::GetPathEffect()
+{
+    return m_pathEffect;
+}
+} // namespace Drawing
+} // namespace OHOS::Rosen
diff --git a/interfaces/kits/napi/graphic/drawing/path_effect_napi/js_path_effect.h b/interfaces/kits/napi/graphic/drawing/path_effect_napi/js_path_effect.h
new file mode 100755
index 0000000000..75683eb537
--- /dev/null
+++ b/interfaces/kits/napi/graphic/drawing/path_effect_napi/js_path_effect.h
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef OHOS_ROSEN_JS_PATH_EFFECT_H
+#define OHOS_ROSEN_JS_PATH_EFFECT_H
+
+#include <native_engine/native_engine.h>
+#include <native_engine/native_value.h>
+#include "effect/path_effect.h"
+
+namespace OHOS::Rosen {
+namespace Drawing {
+class JsPathEffect final {
+public:
+    explicit JsPathEffect(std::shared_ptr<PathEffect> pathEffect = nullptr) : m_pathEffect(pathEffect) {}
+    ~JsPathEffect();
+
+    static napi_value Init(napi_env env, napi_value exportObj);
+    static void Finalizer(napi_env env, void* data, void* hint);
+    static napi_value Constructor(napi_env env, napi_callback_info info);
+    static void Destructor(napi_env env, void *nativeObject, void *finalize);
+
+    static napi_value CreateDashPathEffect(napi_env env, napi_callback_info info);
+    std::shared_ptr<PathEffect> GetPathEffect();
+
+private:
+    static napi_value Create(napi_env env, std::shared_ptr<PathEffect> pathEffect);
+    std::shared_ptr<PathEffect> m_pathEffect = nullptr;
+    static thread_local napi_ref constructor_;
+};
+} // namespace Drawing
+} // namespace OHOS::Rosen
+#endif // OHOS_ROSEN_JS_PATH_EFFECT_H
diff --git a/interfaces/kits/napi/graphic/drawing/sampling_options_napi/js_sampling_options.h b/interfaces/kits/napi/graphic/drawing/sampling_options_napi/js_sampling_options.h
new file mode 100755
index 0000000000..70ed763de5
--- /dev/null
+++ b/interfaces/kits/napi/graphic/drawing/sampling_options_napi/js_sampling_options.h
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef OHOS_ROSEN_JS_SAMPLING_OPTIONS_H
+#define OHOS_ROSEN_JS_SAMPLING_OPTIONS_H
+
+#include <memory>
+#include <native_engine/native_engine.h>
+#include <native_engine/native_value.h>
+
+#include "utils/sampling_options.h"
+
+namespace OHOS::Rosen {
+namespace Drawing {
+class JsSamplingOptions final {
+public:
+    explicit JsSamplingOptions(std::shared_ptr<SamplingOptions> SamplingOptions)
+        : m_samplingOptions(SamplingOptions) {}
+    ~JsSamplingOptions();
+
+    static napi_value Init(napi_env env, napi_value exportObj);
+    static napi_value Constructor(napi_env env, napi_callback_info info);
+    static void Destructor(napi_env env, void* nativeObject, void* finalize);
+
+    std::shared_ptr<SamplingOptions> GetSamplingOptions();
+
+private:
+    static thread_local napi_ref constructor_;
+
+    std::shared_ptr<SamplingOptions> m_samplingOptions = nullptr;
+};
+} // namespace Drawing
+} // namespace OHOS::Rosen
+#endif // OHOS_ROSEN_JS_SAMPLING_OPTIONS_H
\ No newline at end of file
diff --git a/interfaces/kits/napi/graphic/drawing/shadow_layer_napi/js_shadow_layer.h b/interfaces/kits/napi/graphic/drawing/shadow_layer_napi/js_shadow_layer.h
new file mode 100755
index 0000000000..368c214405
--- /dev/null
+++ b/interfaces/kits/napi/graphic/drawing/shadow_layer_napi/js_shadow_layer.h
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef OHOS_ROSEN_JS_SHADOW_LAYER_H
+#define OHOS_ROSEN_JS_SHADOW_LAYER_H
+
+#include <native_engine/native_engine.h>
+#include <native_engine/native_value.h>
+
+#include "effect/blur_draw_looper.h"
+
+namespace OHOS::Rosen {
+namespace Drawing {
+class JsShadowLayer final {
+public:
+    explicit JsShadowLayer(std::shared_ptr<BlurDrawLooper> blurDrawLooper = nullptr)
+        : m_blurDrawLooper(blurDrawLooper) {}
+    ~JsShadowLayer();
+
+    static napi_value Init(napi_env env, napi_value exportObj);
+    static napi_value Constructor(napi_env env, napi_callback_info info);
+    static void Destructor(napi_env env, void* nativeObject, void* finalize);
+    static void Finalizer(napi_env env, void* data, void* hint);
+
+    static napi_value Create(napi_env env, napi_callback_info info);
+    std::shared_ptr<BlurDrawLooper> GetBlurDrawLooper();
+
+private:
+    static napi_value CreateLooper(napi_env env, const std::shared_ptr<BlurDrawLooper> blurDrawLooper);
+    static thread_local napi_ref constructor_;
+    std::shared_ptr<BlurDrawLooper> m_blurDrawLooper = nullptr;
+};
+} // namespace Drawing
+} // namespace OHOS::Rosen
+#endif // OHOS_ROSEN_JS_SHADOW_LAYER_H
\ No newline at end of file